<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Markdown语法与外挂标签写法汇总 | MGodmonkeyの世界</title><meta name="keywords" content="Markdown,外挂标签"><meta name="author" content="MGodmonkey"><meta name="copyright" content="MGodmonkey"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#18171d"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-title" content="Markdown语法与外挂标签写法汇总"><meta name="application-name" content="Markdown语法与外挂标签写法汇总"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#18171d"><meta property="og:type" content="article"><meta property="og:title" content="Markdown语法与外挂标签写法汇总"><meta property="og:url" content="https://www.mgodmonkey.cn/posts/2013454d.html"><meta property="og:site_name" content="MGodmonkeyの世界"><meta property="og:description" content="🥧本文汇总Markdown格式以及外挂标签在网页端的渲染效果，可作为文档进行查询"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb"><meta property="article:author" content="MGodmonkey"><meta property="article:tag"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb"><meta name="description" content="🥧本文汇总Markdown格式以及外挂标签在网页端的渲染效果，可作为文档进行查询"><link rel="shortcut icon" href="https://mybog.s3.bitiful.net/imgs/favicon.ico"><link rel="canonical" href="https://www.mgodmonkey.cn/posts/2013454d"><link rel="preconnect" href="//cdn.cbd.int"><meta name="google-site-verification" content="xxx"><meta name="baidu-site-verification" content="Sqt9yFIkjZdA89TY"><meta name="msvalidate.01" content="xxx"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.cbd.int/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={linkPageTop:{enable:!0,title:"与数百名博主无限进步",addFriendPlaceholder:"昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片）：\n描述：\n站点截图（可选）：\n"},peoplecanvas:void 0,postHeadAiDescription:{enable:!0,gptName:"MGod",mode:"tianli",switchBtn:!1,btnLink:"https://afdian.net/item/886a79d4db6711eda42a52540025c377",randomNum:3,basicWordCount:1e3,key:"72937022917dd1869dad",Referer:"https://www.mgodmonkey.cn/"},diytitle:{enable:!0,leaveTitle:"空巢啦🪹",backTitle:"有蛋了🪺"},LA51:{enable:!0,ck:"K52IQR51E1m8suUy",LingQueMonitorID:"K7A7hMgFTh8JNQPk"},greetingBox:{enable:!0,default:"晚上好👋",list:[{greeting:"晚安😴",startTime:0,endTime:5},{greeting:"早上好鸭👋, 祝你一天好心情！",startTime:6,endTime:9},{greeting:"上午好👋, 状态很好，鼓励一下～",startTime:10,endTime:10},{greeting:"11点多啦, 在坚持一下就吃饭啦～",startTime:11,endTime:11},{greeting:"午安👋, 宝贝",startTime:12,endTime:14},{greeting:"🌈充实的一天辛苦啦！",startTime:14,endTime:18},{greeting:"19点喽, 奖励一顿丰盛的大餐吧🍔。",startTime:19,endTime:19},{greeting:"晚上好👋, 在属于自己的时间好好放松😌~",startTime:20,endTime:24}]},twikooEnvId:"https://twikoo.mgodmonkey.cn/",commentBarrageConfig:{enable:!0,maxBarrage:1,barrageTime:4e3,accessToken:"",mailMd5:""},music_page_default:"nav_music",root:"/",preloader:{source:3},friends_vue_info:void 0,navMusic:!0,mainTone:void 0,authorStatus:{skills:["🤖️ 数码科技爱好者","🔍 分享与热心帮助","🏠 智能家居小能手","🔨 设计开发一条龙","🤝 专修交互与设计","🏃 脚踏实地行动派","🧱 团队小组发动机","💢 壮汉人狠话不多"]},algolia:{appId:"LV9W14O4EO",apiKey:"0fa7b66b1866f423485b93e1e98ceb34",indexName:"hexo",hits:{per_page:6},languages:{input_placeholder:"输入关键词后按下回车查找",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简",rightMenuMsgToTraditionalChinese:"转为繁体",rightMenuMsgToSimplifiedChinese:"转为简体"},noticeOutdate:{limitDay:365,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:330},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,simplehomepage:!1,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{copy:!0,copyrightEbable:!1,limitCount:50,languages:{author:"作者: MGodmonkey",link:"链接: ",source:"来源: MGodmonkeyの世界",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",copySuccess:"复制成功，复制和转载请标注本文地址"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#3b70fc",bgDark:"#1f1f1f",position:"top-center"},source:{justifiedGallery:{js:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js",css:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,shortcutKey:{enable:!0,delay:100,shiftDelay:200},autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={configTitle:"MGodmonkeyの世界",title:"Markdown语法与外挂标签写法汇总",postAI:"",pageFillDescription:"1.Markdown语法自带格式, 1.1 代码块, 1.2 多级标题, 1.3 文字样式, 1.4 引用, 1.5 分割线, 1.6 列表(*+-跟空格都可以), 1.6.1 无序列表, 1.6.2 有序列表, 1.7 图片, 1.8 表格, 1.9 公式, 2.Butterfly外挂标签, 2.1 行内文本样式 text, 2.2 行内文本 span, 2.3 段落文本 p, 2.4 引用note, 2.5 上标标签 tip, 2.6 动态标签 anima, 2.7 复选列表 checkbox, 2.8 单选列表 radio, 2.9 时间轴 timeline, 2.10 链接卡片 link, 2.11 按钮 btns, 2.12 github卡片 ghcard, 2.13 github徽标 ghbdage, 2.14 网站卡片 sites, 2.15 行内图片 inlineimage, 2.16 单张图片 image, 2.17 音频 audio, 2.18 视频 video, 2.19 相册 gallery, 2.20 折叠框 folding, 2.21 分栏 tab, 2.22 诗词标签 poem, 2.23 阿里图标 icon, 2.24 特效标签wow, 2.25  进度条 progress, 2.26 注释 notation, 2.27 气泡注释 bubble, 2.28 引用文献 reference, 2.29 PDF展示, 2.30 Hexo-tag-map 插件, 2.31 隐藏块语法自带格式参考语法图文全面详解分钟学会注意此页面偶尔会存在冲突问题代码块示例源码渲染演示终端终端终端终端多级标题示例源码渲染演示见本文章标题文字样式示例源码渲染演示下划线演示文字加粗演示文字斜体演示文本高亮演示文本删除线演示号字黑体黑体蓝色这里的背景色是此处输入任意想输入的内容下划线演示文字加粗演示文字斜体演示文本高亮演示文本删除线演示号字黑体蓝色这里的背景色是此处输入任意想输入的内容上述要点可参考语法字体颜色大小及文字底色设置引用示例源码渲染演示二级引用演示外键事务行级锁引用内部一样可以用格式二级引用演示外键事务行级锁引用内部一样可以用格式分割线示例源码渲染演示列表跟空格都可以无序列表示例源码渲染演示有序列表示例源码渲染演示注意后面有空格图片示例源码渲染演示本地图片示例图片在线图片本地图片在线图片表格示例源码渲染演示项目标号资金备注无无重要项目标号资金备注无无重要公式示例源码渲染演示外挂标签这部分参考安知鱼基于的外挂标签引入行内文本样式标签语法示例源码渲染演示文本内容文本内容文本内容文本内容文本内容文本内容带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码行内文本标签语法配置参数示例源码渲染演示样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字段落文本标签语法配置参数示例源码渲染演示样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字引用通用配置语法格式参数配置示例源码渲染演示自带外部自带参数用法可选标识不同的标识有不同的配色可选不显示可选可以覆盖配置中的外部参数用法可选标识不同的标识有不同的配色可选可配置自定义只支持图标也可以配置可选可以覆盖配置中的自带样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签外部样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器自带样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签外部样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器上标标签标签语法配置参数示例源码渲染演示参数可选文本内容样式自定义图标支持自定义图标自定义图标动态标签示例源码配置参数示例源码渲染演示参数可选文本内容将所需的类添加到图标或中的任何元素对于父级悬停样式需要给目标元素添加指定类同时还要给目标元素的父级元素添加类详情见示例及示例源码可以通过给目标元素添加类或来控制动画快慢当页面加载时显示动画调整动画速度当鼠标悬停时显示动画当鼠标悬停在父级元素时显示动画当页面加载时显示动画调整动画速度当鼠标悬停时显示动画当鼠标悬停在父级元素时显示动画复选列表标签语法配置参数示例源码渲染演示样式参数可选文本支持简单样式颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉单选列表标签语法配置参数示例源码渲染演示样式参数可选文本支持简单颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色时间轴标签语法配置参数示例源码渲染演示时间线标题可选时间节点标题正文内容时间节点标题正文内容标题时间线颜色留空时间轴样式如果有插件需要删除并重新安装最新版本设置版本的和不适用于版本如果使用了则需要删除版本的标签在版本中被重命名为版本的置顶改为了并且同样适用于的页面如果使用了插件建议卸载版本默认开启了服务不需要额外处理全局搜索并替换为组件的索引规则有变使用组件的文章内对应的组件名必须是组件的列表名优先显示文章的其次是时间轴样式如果有插件需要删除并重新安装最新版本设置版本的和不适用于版本如果使用了则需要删除版本的标签在版本中被重命名为版本的置顶改为了并且同样适用于的页面如果使用了插件建议卸载版本默认开启了服务不需要额外处理全局搜索并替换为组件的索引规则有变使用组件的文章内对应的组件名必须是组件的列表名优先显示文章的其次是链接卡片标签语法示例源码渲染演示标题链接图片链接可选糖果屋教程贴引用站外地址糖果屋教程贴按钮标签语法参数配置示例源码渲染演示样式参数标题链接图片或者图标标题链接图片或者图标圆角样式增加文字样式可以在容器内增加标题和描述文字布局方式默认为自动宽度适合视野内只有一两个的情况参数含义宽一点的按钮填充布局自动铺满至少一行多了会换行居中按钮之间是固定间距居中分散等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版卡片标签语法参数配置示例源码渲染演示用户名其它参数可选用户名仓库其它参数可选使用分割各个参数写法为参数名参数值以下只写几个常用参数值参数名取值释义隐藏指定统计将私人项目贡献添加到总提交计数中显示图标查阅主题用户信息卡片仓库信息卡片用户信息卡片仓库信息卡片徽标标签语法配置参数示例源码渲染演示徽标左边的信息必选参数徽标右边的信息必选参数徽标图标图标名称详见可选参数徽标右边的颜色可选参数指向的链接可选参数徽标的额外信息可选参数主要用于优化但标签不会像标签一样在鼠标悬停显示信息自定义参数支持的全部参数支持具体参数可以参看上文中的拓展写法示例形式为基本参数定义徽标左右文字和图标信息参数定义徽标右侧内容背景色指向链接本站使用为静态资源提供加速如果是跨顺序省略可选参数仍然需要写个逗号用作分割拓展参数支持的的全部参数内容本站采用双线部署默认线路托管于如果是跨顺序省略可选参数组仍然需要写双竖线用作分割基本参数定义徽标左右文字和图标信息参数定义徽标右侧内容背景色指向链接如果是跨顺序省略可选参数仍然需要写个逗号用作分割拓展参数支持的的全部参数内容如果是跨顺序省略可选参数组仍然需要写双竖线用作分割网站卡片标签语法示例源码渲染演示标题链接截图链接头像链接可选描述可选标题链接截图链接头像链接可选描述可选简约风格这是一段关于这个网站的描述文字这是一段关于这个网站的描述文字这是一段关于这个网站的描述文字这是一段关于这个网站的描述文字行内图片标签语法参数配置示例源码渲染演示图片链接高度可选高度这是一段话这又是一段话这是一段话这又是一段话单张图片标签语法参数配置示例源码渲染演示链接宽度可选高度可选描述可选占位颜色可选图片宽度高度图片描述图片描述需要在主题配置文件中开启图片描述占位背景色添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感音频标签语法示例源码渲染演示音频链接视频标签语法标签语法示例源码渲染演示视频链接对齐方向列数逗号后面直接写列数支持列宽度宽度宽度宽度宽度宽度相册标签语法参数配置示例源码渲染演示相册图库相册圖片格式相册图库参数名释义图库名字图库描述链接到对应相册的地址图库封面相册区别于旧版的相册新的相册会自动根据图片长度进行排版书写也更加方便与格式一样可根据需要插入到相应的无需再自己配置长宽建议在粘贴时故意使用长短大小横竖不一的图片会有更好的效果尺寸完全相同的图片只会平铺输出效果很糟糕相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册加载更多折叠框标签语法示例源码渲染演示相册图库参数可选标题颜色状态状态填写代表默认打开查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试假装这里有代码块代码块没法嵌套代码块查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试假装这里有代码块代码块没法嵌套代码块查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试分栏标签语法配置参数示例源码渲染演示选项卡块标签的唯一名称不带逗号将在中用作每个标签及其索引号的前缀如果名称中包含空格则对于生成所有空格将由破折号代替仅当前帖子页面的必须是唯一的活动选项卡的索引号如果未指定将选择第一个标签如果为则不会选择任何选项卡可选参数当前选项卡的标题如果未指定标题则带有制表符索引后缀的唯一名称将用作制表符的标题如果未指定标题但指定了图标则标题将为空可选参数图标名称全名看起来像可以指定带空格或不带空格例如和可选参数预设选择第一个默认预设选择没有预设值自定义名只有和名第一个名字为第一个只有图标没有名字炸弹名字预设选择第一个默认预设选择没有预设值自定义名只有和名第一个炸弹名字为第一个只有图标没有名字名字诗词标签参数配置示例源码渲染演示诗词标题作者可以不写水调歌头苏轼丙辰中秋欢饮达旦大醉作此篇兼怀子由明月几时有把酒问青天不知天上宫阙今夕是何年我欲乘风归去又恐琼楼玉宇高处不胜寒起舞弄清影何似在人间转朱阁低绮户照无眠不应有恨何事长向别时圆人有悲欢离合月有阴晴圆缺此事古难全但愿人长久千里共婵娟水调歌头苏轼丙辰中秋欢饮达旦大醉作此篇兼怀子由明月几时有把酒问青天不知天上宫阙今夕是何年我欲乘风归去又恐琼楼玉宇高处不胜寒起舞弄清影何似在人间转朱阁低绮户照无眠不应有恨何事长向别时圆人有悲欢离合月有阴晴圆缺此事古难全但愿人长久千里共婵娟阿里图标标签语法参数配置示例源码渲染演示表示图标可以在自己的阿里矢量图标库项目的引用方案内查询并复制表示图标大小直接填写数字即可单位为图标大小默认值为特效标签示例源码渲染演示示例源码渲染演示内容动画样式效果详见参考文档选填项动画持续时间单位可以是也可以是例如选填项动画开始的延迟时间单位可以是也可以是例如选填项开始动画的距离相对浏览器底部选填项动画重复的次数动画效果动画效果持续延时离底部距离时启动重复次动画效果持续延时离底部距离时启动重复次动画效果持续延时离底部距离时启动重复次动画效果持续延时动画效果持续延时动画效果延时重复次此处注意不用的参数位置要留空用逗号间隔动画效果延时重复次动画效果动画效果持续延时离底部距离时启动重复次动画效果持续延时离底部距离时启动重复次动画效果持续延时离底部距离时启动重复次动画效果持续延时动画效果持续延时动画效果延时重复次此处注意不用的参数位置要留空用逗号间隔动画效果延时重复次进度条进度条标签参考沂佰孜猫给文章添加彩色进度条源样式提取自主题参数配置标签语法示例源码渲染演示到的阿拉伯数字颜色取值有进度条上的文字内容进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览进度条样式预览注释标签语法参数配置示例源码渲染演示注释词汇悬停显示的注解内容把鼠标移动到我上面试试可以看到注解内容出现在顶栏把鼠标移动到我上面试试气泡注释标签语法参数配置示例源码渲染演示注释词汇悬停显示的注解内容可选气泡背景色默认为最近我学到了不少新玩意儿虽然对很多大佬来说这些已经是旧技术了比如的兄弟相邻选择器例如布局是的缩写意为弹性布局用来为盒状模型提供最大的灵活性变换属性向元素应用或转换该属性允许我们对元素进行旋转缩放移动或倾斜的贝塞尔速度曲线贝塞尔曲线又称贝兹曲线或贝济埃曲线是应用于二维图形应用程序的数学曲线一般的矢量图形软件通过它来精确画出曲线贝兹曲线由线段与节点组成节点是可拖动的支点线段像可伸缩的皮筋写法还有今天刚看到的属性使用裁剪方式创建元素的可显示区域区域内的部分显示区域外的隐藏属性这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路最近我学到了不少新玩意儿虽然对很多大佬来说这些已经是旧技术了比如的兄弟相邻选择器例如布局是的缩写意为弹性布局用来为盒状模型提供最大的灵活性变换属性向元素应用或转换该属性允许我们对元素进行旋转缩放移动或倾斜的贝塞尔速度曲线贝塞尔曲线又称贝兹曲线或贝济埃曲线是应用于二维图形应用程序的数学曲线一般的矢量图形软件通过它来精确画出曲线贝兹曲线由线段与节点组成节点是可拖动的支点线段像可伸缩的皮筋写法还有今天刚看到的属性使用裁剪方式创建元素的可显示区域区域内的部分显示区域外的隐藏属性这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路引用文献标签语法参数配置示例源码渲染演示引用上标上标序号内容需与标签的对应才能实现跳转引用的参考文献名称引用出处序号内容需与标签的对应才能实现跳转引用的参考文献名称引用的参考文献链接可省略糖果屋是一个私人性质的博客糖果屋群聊简介从各类教程至生活点滴无话不谈建群的目的是提供一个闲聊的场所博客采用框架中文文档主题安装文档一快速开始本项目参考了标签插件的标签样式引入并针对主题修改了相应的在此鸣谢主题众开发者主要参考内容包括各个的内置标签插件文档文档内置标签插件主题的各个衍生魔改安装文档标签外挂小弋生活馆全样式预览小康的主题使用文档糖果屋群聊简介中文文档安装文档一快速开始标签插件文档内置标签插件安装文档标签外挂小弋生活馆全样式预览小康的主题使用文档糖果屋是一个私人性质的博客糖果屋群聊简介参考资料从各类教程至生活点滴无话不谈建群的目的是提供一个闲聊的场所博客采用框架中文文档参考资料主题安装文档一快速开始参考资料本项目参考了标签插件参考资料的标签样式引入并针对主题修改了相应的在此鸣谢主题众开发者主要参考内容包括各个的内置标签插件文档文档内置标签插件参考资料主题的各个衍生魔改安装文档标签外挂参考资料小弋生活馆全样式预览参考资料参考资料小康的主题使用文档参考资料糖果屋群聊简介中文文档安装文档一快速开始标签插件文档内置标签插件安装文档标签外挂小弋生活馆全样式预览小康的主题使用文档展示标签语法参数配置示例源码渲染演示文件路径文件路径可以是相对路径或者是在线链接本地文件在文件路径下创建一个同名文件夹其内放文件名为的文件在线链接小作文讲义在线链接要放到最外层才能起作用小作文讲义插件标签语法参数配置示例源码渲染演示标签值经度纬度文本缩放等级宽高默认图层地图名标签值必填宽默认高默认缩放等级默认宽默认高默认默认图层默认混合地图百分数或具体值或取值百分数或具体值或取值谷歌地图百分数或具体值或取值百分数或具体值或取值高德地图百分数或具体值或取值百分数或具体值或取值百度地图百分数或具体值或取值百分数或具体值或取值地图百分数或具体值或取值百分数或具体值或取值地图百分数或具体值或取值百分数或具体值或不支持此参数参数之间用英文逗号相隔参数必须按上述事例顺序输入不得为空同一个页面同一组经纬度值只能插入一个相同标签值的地图若有需要可以将第二个地图上经度或纬度末尾删除一两个数参数取值必须在上述范围内默认图层即地图叠加层的值默认常规地图还是卫星地图可按地图显示顺序取值缩放等级数字越大地图比例尺越小显示的越精细除标签值外其他参数选填但每个参数的左边的参数必填谷歌地图需要外网才能加载查看坐标获取高德地图坐标拾取系统百度地图坐标拾取系统这里是西湖灵隐寺据说求姻缘很灵验哦这里是西湖灵隐寺据说求姻缘很灵验哦高德地图高德地图高德地图高德地图智图地图谷歌地图高德卫星地图谷歌卫星地图高德卫星标注谷歌卫星标注放大缩小谷歌地图谷歌卫星图谷歌卫星标注放大缩小这里是西湖灵隐寺据说求姻缘很灵验哦智图地图午夜蓝灰色暖色水系放大缩小这里是西湖灵隐寺据说求姻缘很灵验哦隐藏块标签语法参数配置示例源码渲染演示要隐藏的内容展示前按钮显示的文字可选按钮的背景颜色可选按钮显示的文字的颜色可选点我预览这里有张图片点我预览这里有张图片",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-06-01 22:00:00",postMainColor:""}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:(e,t,a)=>{if(0===a)return;const o={value:t,expiry:Date.now()+864e5*a};localStorage.setItem(e,JSON.stringify(o))},get:e=>{const t=localStorage.getItem(e);if(!t)return;const a=JSON.parse(t);if(!(Date.now()>a.expiry))return a.value;localStorage.removeItem(e)}},e.getScript=(e,t={})=>new Promise(((a,o)=>{const c=document.createElement("script");c.src=e,c.async=!0,c.onerror=o,c.onload=c.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(c.onload=c.onreadystatechange=null,a())},Object.keys(t).forEach((e=>{c.setAttribute(e,t[e])})),document.head.appendChild(c)})),e.getCSS=(e,t=!1)=>new Promise(((a,o)=>{const c=document.createElement("link");c.rel="stylesheet",c.href=e,t&&(c.id=t),c.onerror=o,c.onload=c.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(c.onload=c.onreadystatechange=null,a())},document.head.appendChild(c)})),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#18171d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#f7f9fe")};const t=saveToLocal.get("theme"),a=window.matchMedia("(prefers-color-scheme: dark)").matches,o=window.matchMedia("(prefers-color-scheme: light)").matches,c=window.matchMedia("(prefers-color-scheme: no-preference)").matches,n=!a&&!o&&!c;if(void 0===t){if(o)activateLightMode();else if(a)activateDarkMode();else if(c||n){const e=(new Date).getHours();e<=6||e>=18?activateDarkMode():activateLightMode()}window.matchMedia("(prefers-color-scheme: dark)").addListener((e=>{void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode():activateLightMode())}))}else"light"===t?activateLightMode():activateDarkMode();const d=saveToLocal.get("aside-status");void 0!==d&&("hide"===d?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="/css/custom.css" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="MGodmonkeyの世界" type="application/atom+xml"></head><body data-type="anzhiyu"><div id="web_bg"></div><div id="an_music_bg"></div><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><img class="loading-img nolazyload" alt="加载头像" src="https://mybog.s3.bitiful.net/imgs/head.jpg"><div class="loading-image-dot"></div></div></div><script>const preloader={endLoading:()=>{document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",(()=>{preloader.endLoading()})),setTimeout((function(){preloader.endLoading()}),1e4),document.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()}))</script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.10/progress_bar/progress_bar.css"><script async src="https://cdn.cbd.int/pace-js@1.2.4/pace.min.js" data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"></script><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><div id="nav-group"><span id="blog_name"><div class="back-home-button"><i class="anzhiyufont anzhiyu-icon-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" href="https://www.mgodmonkey.cn/" title="博客"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">AI项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://chat.mgodmonkey.cn/" title="ChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="ChatGPT"><span class="back-menu-item-text">ChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://newchat.mgodmonkey.cn/" title="NewChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="NewChatGPT"><span class="back-menu-item-text">NewChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://autogpt.mgodmonkey.cn/" title="AutoGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/火龙果.svg" alt="AutoGPT"><span class="back-menu-item-text">AutoGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://academic.chatwithpaper.org/" title="AcademicGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/石榴.svg" alt="AcademicGPT"><span class="back-menu-item-text">AcademicGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://chatwithpaper.org/" title="Chatpaper"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/芒果.svg" alt="Chatpaper"><span class="back-menu-item-text">Chatpaper</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">其他</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://memos.mgodmonkey.cn/" title="Memos"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="Memos"><span class="back-menu-item-text">Memos</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY" title="必过通原"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="必过通原"><span class="back-menu-item-text">必过通原</span></a></div></div></div></div><a id="site-name" href="/" accesskey="h"><div class="title">MGodmonkeyの世界</div><i class="anzhiyufont anzhiyu-icon-house-chimney"></i></a></span><div class="mask-name-container"><div id="name-container"><a id="page-name" href="javascript:anzhiyu.scrollToDest(0, 500)">PAGE_NAME</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kele"></use></svg> <span>归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-zhaji"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-denglong"></use></svg> <span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://music.mgodmonkey.cn"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-erji"></use></svg> <span>音乐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kafei"></use></svg> <span>番剧</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/air-conditioner"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-chonglang"></use></svg> <span>空调</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>社交</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon--chat"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-zhaopian_1"></use></svg> <span>相册集</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/MyFavoriteBaby/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xingsu"></use></svg> <span>大陆养虾</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_shu"></use></svg> <span>加入友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>个人</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_qizhi"></use></svg> <span>说说</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/task_list/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xiaoya"></use></svg> <span>清单</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/equipment/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xigua"></use></svg> <span>装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_aixin"></use></svg> <span>关于</span></a></li></ul></div></div></div><div id="nav-right"><div class="nav-button only-home" id="travellings_button" title="随机前往一个开往项目网站"><a class="site-page" onclick="anzhiyu.totraveling()" title="随机前往一个开往项目网站" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external"><i class="anzhiyufont anzhiyu-icon-train"></i></a></div><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机前往一个文章" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-dice"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索🔍" accesskey="s"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i> <span>搜索</span></a></div><input id="center-console" type="checkbox"><label class="widget" for="center-console" title="中控台" onclick="anzhiyu.switchConsole()"><i class="left"></i><i class="widget center"></i><i class="widget right"></i></label><div id="console"><div class="console-card-group-reward"><ul class="reward-all console-card"><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" target="_blank"><img class="post-qr-code-img" alt="微信" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_wechat.png"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" target="_blank"><img class="post-qr-code-img" alt="支付宝" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_alipay.png"></a><div class="post-qr-code-desc">支付宝</div></li></ul></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments"><div class="card-content"><div class="author-content-item-tips">互动</div><span class="author-content-item-title">最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div></div><div class="console-card-group-right"><div class="console-card tags"><div class="card-content"><div class="author-content-item-tips">音乐</div><span class="author-content-item-title">灵魂的碰撞💥</span></div></div><div class="console-card history"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-box-archiv"></i><span>文章</span></div><div class="card-archives"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多"><i class="anzhiyufont anzhiyu-icon-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">六月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">五月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">四月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">三月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">二月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/09/"><span class="card-archive-list-date">九月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">七月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">7</span><span>篇</span></div></a></li></ul></div><hr></div></div></div><div class="button-group"><div class="console-btn-item"><a class="darkmode_switchbutton" title="显示模式切换" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-moon"></i></a></div><div class="console-btn-item" id="consoleHideAside" onclick="anzhiyu.hideAsideBtn()" title="边栏显示控制"><a class="asideSwitch"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></a></div><div class="console-btn-item on" id="consoleCommentBarrage" onclick="anzhiyu.switchCommentBarrage()" title="热评开关"><a class="commentBarrage"><i class="anzhiyufont anzhiyu-icon-message"></i></a></div><div class="console-btn-item" id="consoleMusic" onclick="anzhiyu.musicToggle()" title="音乐开关"><a class="music-switch"><i class="anzhiyufont anzhiyu-icon-music"></i></a></div><div class="console-btn-item" id="consoleKeyboard" onclick="anzhiyu.keyboardToggle()" title="快捷键开关"><a class="keyboard-switch"><i class="anzhiyufont anzhiyu-icon-keyboard"></i></a></div></div><div class="console-mask" onclick="anzhiyu.hideConsole()" href="javascript:void(0);"></div></div><div class="nav-button" id="nav-totop"><a class="totopbtn" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i><span id="percent" onclick="anzhiyu.scrollToDest(0,500)">0</span></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" title="切换"><i class="anzhiyufont anzhiyu-icon-bars"></i></a></div></div></div></nav><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original">原创</a><span class="article-meta tags"><a class="article-meta__tags" href="/tags/Markdown/" tabindex="-1" itemprop="url"><span><i class="anzhiyufont anzhiyu-icon-hashtag"></i> Markdown</span></a><a class="article-meta__tags" href="/tags/%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE/" tabindex="-1" itemprop="url"><span><i class="anzhiyufont anzhiyu-icon-hashtag"></i> 外挂标签</span></a></span></div></div><h1 class="post-title" itemprop="name headline">Markdown语法与外挂标签写法汇总</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="anzhiyufont anzhiyu-icon-calendar-days post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" itemprop="dateCreated datePublished" datetime="2023-03-18T10:19:03.000Z" title="发表于 2023-03-18 18:19:03">2023-03-18</time><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-history post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" itemprop="dateCreated datePublished" datetime="2023-06-01T14:00:00.000Z" title="更新于 2023-06-01 22:00:00">2023-06-01</time></span></div><div class="meta-secondline"><span class="post-meta-separator"></span><span class="post-meta-wordcount"><i class="anzhiyufont anzhiyu-icon-file-word post-meta-icon" title="文章字数"></i><span class="post-meta-label" title="文章字数">字数总计:</span><span class="word-count" title="文章字数">1.3w</span><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-clock post-meta-icon" title="阅读时长"></i><span class="post-meta-label" title="阅读时长">阅读时长:</span><span>57分钟</span></span><span class="post-meta-separator"></span><span class="post-meta-position" title="作者IP属地为广西"><i class="anzhiyufont anzhiyu-icon-location-dot"></i> 广西</span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section><div id="post-top-cover"><img class="nolazyload" id="post-top-bg" src="https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb"></div></header><main id="blog-container"><div class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container" itemscope itemtype="https://www.mgodmonkey.cn/posts/2013454d.html"><header><a href="/tags/Markdown/" tabindex="-1" itemprop="url">Markdown</a><a href="/tags/%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE/" tabindex="-1" itemprop="url">外挂标签</a><h1 id="CrawlerTitle" itemprop="name headline">Markdown语法与外挂标签写法汇总</h1><span itemprop="author" itemscope itemtype="http://schema.org/Person">MGodmonkey</span><time itemprop="dateCreated datePublished" datetime="2023-03-18T10:19:03.000Z" title="发表于 2023-03-18 18:19:03">2023-03-18</time><time itemprop="dateCreated datePublished" datetime="2023-06-01T14:00:00.000Z" title="更新于 2023-06-01 22:00:00">2023-06-01</time></header><h1>1.Markdown语法自带格式</h1><div class="note info flat"><blockquote><p>参考：<a target="_blank" rel="noopener" href="https://blog.csdn.net/u014061630/article/details/81359144">Markdown语法图文全面详解(10分钟学会)</a></p></blockquote></div><div class="note warning flat"><p>注意：此页面偶尔会存在CSS冲突问题!</p></div><h2 id="1-1-代码块">1.1 代码块</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">\```shell</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">VSCode终端</span></span><br><span class="line">hexo clean; hexo s</span><br><span class="line">hexo clean; hexo g; hexo d</span><br><span class="line">git add .; git commit -m &quot;npm publish&quot;; npm version patch; </span><br><span class="line">git push</span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">Cmder终端</span></span><br><span class="line">hexo clean &amp;&amp; hexo s</span><br><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</span><br><span class="line">git add . &amp;&amp; git commit -m &quot;npm publish&quot; &amp;&amp; npm version patch</span><br><span class="line">git push</span><br><span class="line">\```</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">VSCode终端</span></span><br><span class="line">hexo clean; hexo s</span><br><span class="line">hexo clean; hexo g; hexo d</span><br><span class="line">git add .; git commit -m &quot;npm publish&quot;; npm version patch; </span><br><span class="line">git push</span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">Cmder终端</span></span><br><span class="line">hexo clean &amp;&amp; hexo s</span><br><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</span><br><span class="line">git add . &amp;&amp; git commit -m &quot;npm publish&quot; &amp;&amp; npm version patch</span><br><span class="line">git push</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-2-多级标题">1.2 多级标题</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># H1</span></span><br><span class="line"><span class="section">## H2</span></span><br><span class="line"><span class="section">### H3</span></span><br><span class="line"><span class="section">#### H4</span></span><br><span class="line"><span class="section">##### H5</span></span><br><span class="line"><span class="section">###### H6</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><p>见本文章标题!</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-3-文字样式">1.3 文字样式</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">u</span>&gt;</span></span>下划线演示<span class="language-xml"><span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">文字<span class="strong">**加粗**</span>演示</span><br><span class="line"></span><br><span class="line">文字<span class="emphasis">*斜体*</span>演示</span><br><span class="line"></span><br><span class="line">文本<span class="code">`高亮`</span>演示</span><br><span class="line"></span><br><span class="line">文本~~删除~~线演示</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">font</span> <span class="attr">size</span> = <span class="string">5</span>&gt;</span></span>5号字<span class="language-xml"><span class="tag">&lt;/<span class="name">font</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">font</span> <span class="attr">face</span>=<span class="string">&quot;黑体&quot;</span>&gt;</span></span>黑体<span class="language-xml"><span class="tag">&lt;/<span class="name">font</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">blue</span>&gt;</span></span>蓝色<span class="language-xml"><span class="tag">&lt;/<span class="name">font</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">td</span> <span class="attr">bgcolor</span>=<span class="string">MistyRose</span>&gt;</span></span>这里的背景色是：MistyRosen，此处输入任意想输入的内容<span class="language-xml"><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><p><u>下划线演示</u></p><p>文字<strong>加粗</strong>演示</p><p>文字<em>斜体</em>演示</p><p>文本<code>高亮</code>演示</p><p>文本<s>删除</s>线演示</p><p><font size="5">5号字</font><br><font face="黑体">黑体</font><br><font color="blue">蓝色</font></p><table><tr><td bgcolor="MistyRose">这里的背景色是：MistyRosen，此处输入任意想输入的内容</td></tr></table></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><div class="note info flat"><p>上述要点可参考:<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_43732429/article/details/108034518">【Markdown语法】字体颜色大小及文字底色设置</a></p></div><h2 id="1-4-引用">1.4 引用</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="quote">&gt;  Java</span></span><br><span class="line"><span class="quote">&gt; 二级引用演示</span></span><br><span class="line"><span class="quote">&gt; MySQL</span></span><br><span class="line"><span class="quote">&gt; &gt;外键</span></span><br><span class="line"><span class="quote">&gt; &gt;</span></span><br><span class="line"><span class="quote">&gt; &gt;事务</span></span><br><span class="line"><span class="quote">&gt; &gt;</span></span><br><span class="line"><span class="quote">&gt; &gt;<span class="strong">**行级锁**</span>(引用内部一样可以用格式)</span></span><br><span class="line"><span class="quote">&gt; </span></span><br><span class="line"><span class="quote">&gt; ....</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><blockquote><p>Java<br>二级引用演示<br>MySQL</p><blockquote><p>外键</p><p>事务</p><p><strong>行级锁</strong>(引用内部一样可以用格式)</p></blockquote><p>…</p></blockquote></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-5-分割线">1.5 分割线</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line"><span class="strong">**<span class="emphasis">*</span></span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><hr><hr></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-6-列表-跟空格都可以">1.6 列表(*,+,-跟空格都可以)</h2><h3 id="1-6-1-无序列表">1.6.1 无序列表</h3><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">*</span> Java</span><br><span class="line"><span class="bullet">*</span> Python</span><br><span class="line"><span class="bullet">*</span> ...</span><br><span class="line"></span><br><span class="line"><span class="bullet">+</span> Java</span><br><span class="line"><span class="bullet">+</span> Python</span><br><span class="line"><span class="bullet">+</span> ...</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> Java</span><br><span class="line"><span class="bullet">-</span> Python</span><br><span class="line"><span class="bullet">-</span> ...</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ul><li>Java</li><li>Python</li><li>…</li></ul><ul><li>Java</li><li>Python</li><li>…</li></ul><ul><li>Java</li><li>Python</li><li>…</li></ul></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h3 id="1-6-2-有序列表">1.6.2 有序列表</h3><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 注意后面有空格</span></span><br><span class="line"><span class="bullet">1.</span> </span><br><span class="line"><span class="bullet">2.</span> </span><br><span class="line"><span class="bullet">3.</span> </span><br><span class="line"><span class="bullet">4.</span> </span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li></li><li></li><li></li><li></li></ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-7-图片">1.7 图片</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 本地图片</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;/assets/pusheencode.webp&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;示例图片&quot;</span> <span class="attr">style</span>=<span class="string">&quot;zoom:50%;&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="section"># 在线图片</span></span><br><span class="line">![<span class="string">code</span>](<span class="link">https://cdn.jsdelivr.net/gh/fomalhaut1998/markdown_pic/img/code.png</span>)</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><p>本地图片:<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="/assets/pusheencode.webp" alt="示例图片" style="zoom:50%"><br>在线图片:<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/fomalhaut1998/markdown_pic/img/code.png" alt="code"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-8-表格">1.8 表格</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| 项目标号 | 资金     | 备注 |</span><br><span class="line">| -------- | -------- | ---- |</span><br><span class="line">| 1        | 100，000 | 无   |</span><br><span class="line">| 2        | 200，000 | 无   |</span><br><span class="line">| 3        | 300,600  | 重要 |</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><table><thead><tr><th>项目标号</th><th>资金</th><th>备注</th></tr></thead><tbody><tr><td>1</td><td>100，000</td><td>无</td></tr><tr><td>2</td><td>200，000</td><td>无</td></tr><tr><td>3</td><td>300,600</td><td>重要</td></tr></tbody></table></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="1-9-公式">1.9 公式</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$$</span><br><span class="line">\Gamma(z)=\int<span class="emphasis">_0^\infty t^&#123;z-1&#125;e^&#123;-t&#125;dt.</span></span><br><span class="line"><span class="emphasis">$$</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><p>$$<br>\Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt.<br>$$</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h1>2.Butterfly外挂标签</h1><div class="note info flat"><p>这部分参考安知鱼:<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/7d58.html">基于Butterfly的外挂标签引入</a></p></div><h2 id="2-1-行内文本样式-text">2.1 行内文本样式 text</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% u 文本内容 %&#125;</span><br><span class="line">&#123;% emp 文本内容 %&#125;</span><br><span class="line">&#123;% wavy 文本内容 %&#125;</span><br><span class="line">&#123;% del 文本内容 %&#125;</span><br><span class="line">&#123;% kbd 文本内容 %&#125;</span><br><span class="line">&#123;% psw 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 带 &#123;% u 下划线 %&#125; 的文本</span><br><span class="line"><span class="bullet">2.</span> 带 &#123;% emp 着重号 %&#125; 的文本</span><br><span class="line"><span class="bullet">3.</span> 带 &#123;% wavy 波浪线 %&#125; 的文本</span><br><span class="line"><span class="bullet">4.</span> 带 &#123;% del 删除线 %&#125; 的文本</span><br><span class="line"><span class="bullet">5.</span> 键盘样式的文本 &#123;% kbd command %&#125; + &#123;% kbd D %&#125;</span><br><span class="line"><span class="bullet">6.</span> 密码样式的文本：&#123;% psw 这里没有验证码 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><ol><li>带 <u>下划线</u> 的文本</li><li>带<emp>着重号</emp>的文本</li><li>带<wavy>波浪线</wavy>的文本</li><li>带 <del>删除线</del> 的文本</li><li>键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd></li><li>密码样式的文本：<psw>这里没有验证码</psw></li></ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-2-行内文本-span">2.2 行内文本 span</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% span 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>字体</code>: logo, code</li><li><code>颜色</code>: red,yellow,green,cyan,blue,gray</li><li><code>大小</code>: small, h4, h3, h2, h1, large, huge, ultra</li><li><code>对齐方向</code>: left, center, right</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">在一段话中方便插入各种颜色的标签，包括：&#123;% span red, 红色 %&#125;、&#123;% span yellow, 黄色 %&#125;、&#123;% span green, 绿色 %&#125;、&#123;% span cyan, 青色 %&#125;、&#123;% span blue, 蓝色 %&#125;、&#123;% span gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">&#123;% span center logo large, Volantis %&#125;</span><br><span class="line">&#123;% span center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<span class="p red">红色</span>、<span class="p yellow">黄色</span>、<span class="p green">绿色</span>、<span class="p cyan">青色</span>、<span class="p blue">蓝色</span>、<span class="p gray">灰色</span>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<br><span class="p center logo large">Volantis</span><br><span class="p center small">A Wonderful Theme for Hexo</span></li></ul></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-3-段落文本-p">2.3 段落文本 p</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>字体</code>: logo, code</li><li><code>颜色</code>: red,yellow,green,cyan,blue,gray</li><li><code>大小</code>: small, h4, h3, h2, h1, large, huge, ultra</li><li><code>对齐方向</code>: left, center, right</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">在一段话中方便插入各种颜色的标签，包括：&#123;% p red, 红色 %&#125;、&#123;% p yellow, 黄色 %&#125;、&#123;% p green, 绿色 %&#125;、&#123;% p cyan, 青色 %&#125;、&#123;% p blue, 蓝色 %&#125;、&#123;% p gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">&#123;% p center logo large, Volantis %&#125;</span><br><span class="line">&#123;% p center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<p class="p red">红色</p>、<p class="p yellow">黄色</p>、<p class="p green">绿色</p>、<p class="p cyan">青色</p>、<p class="p blue">蓝色</p>、<p class="p gray">灰色</p>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。</li></ul><p class="p center logo large">Volantis</p><p class="p center small">A Wonderful Theme for Hexo</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-4-引用note">2.4 引用note</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">通用配置</button><button type="button" class="tab" data-href="分栏-2">语法格式</button><button type="button" class="tab" data-href="分栏-3">参数配置</button><button type="button" class="tab" data-href="分栏-4">示例源码</button><button type="button" class="tab" data-href="分栏-5">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">note:</span><br><span class="line">  # Note tag style values:</span><br><span class="line">  #  - simple    bs-callout old alert style. Default.</span><br><span class="line">  #  - modern    bs-callout new (v2-v3) alert style.</span><br><span class="line">  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span><br><span class="line">  #  - disabled  disable all CSS styles import of note tag.</span><br><span class="line">  style: simple</span><br><span class="line">  icons: false</span><br><span class="line">  border<span class="emphasis">_radius: 3</span></span><br><span class="line"><span class="emphasis">  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line"><span class="emphasis">  # Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line"><span class="emphasis">  light_</span>bg<span class="emphasis">_offset: 0</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 自带icon</span></span><br><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"><span class="section"># 外部icon</span></span><br><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><p>1.自带icon</p><table><thead><tr><th>参数</th><th style="text-align:center">用法</th></tr></thead><tbody><tr><td>class</td><td style="text-align:center">【可选】标识，不同的标识有不同的配色 （ default / primary / success / info / warning / danger ）</td></tr><tr><td>no-icon</td><td style="text-align:center">【可选】不显示 icon</td></tr><tr><td>style</td><td style="text-align:center">【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）</td></tr></tbody></table><p>2.外部icon</p><table><thead><tr><th>参数</th><th style="text-align:center">用法</th></tr></thead><tbody><tr><td>class</td><td style="text-align:center">【可选】标识，不同的标识有不同的配色 （ default / blue / pink / red / purple / orange / green ）</td></tr><tr><td>no-icon</td><td style="text-align:center">【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )</td></tr><tr><td>style</td><td style="text-align:center">【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）</td></tr></tbody></table></div><div class="tab-item-content" id="分栏-4"><details class="folding-tag" blue><summary>1.自带icon</summary><div class="content"><p>1.<code>simple</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default simple %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary simple %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success simple %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info simple %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning simple %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger simple %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>2.<code>modern</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note modern %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default modern %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary modern %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success modern %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info modern %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning modern %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger modern %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>3.<code>flat</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note flat %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default flat %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary flat %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success flat %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info flat %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning flat %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger flat %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>4.<code>disabled</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note disabled %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default disabled %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary disabled %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success disabled %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info disabled %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning disabled %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger disabled %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>5.<code>no-icon</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default no-icon %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary no-icon %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success no-icon %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info no-icon %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning no-icon %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger no-icon %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></div></details><details class="folding-tag" blue><summary>2.外部icon</summary><div class="content"><p>1.<code>simple</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;2021年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>2.<code>modern</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;2021年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>3.<code>flat</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;2021年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>4.<code>disabled</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;2021年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; disabled %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>5.<code>no-icon</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue no-icon %&#125;2021年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink no-icon %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red no-icon %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple no-icon %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green no-icon %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></div></details></div><div class="tab-item-content" id="分栏-5"><details class="folding-tag" blue><summary>1.自带icon</summary><div class="content"><p>1.<code>simple</code>样式</p><div class="note simple"><p>默认 提示块标签</p></div><div class="note default simple"><p>default 提示块标签</p></div><div class="note primary simple"><p>primary 提示块标签</p></div><div class="note success simple"><p>success 提示块标签</p></div><div class="note info simple"><p>info 提示块标签</p></div><div class="note warning simple"><p>warning 提示块标签</p></div><div class="note danger simple"><p>danger 提示块标签</p></div>2.`modern`样式<div class="note modern"><p>默认 提示块标签</p></div><div class="note default modern"><p>default 提示块标签</p></div><div class="note primary modern"><p>primary 提示块标签</p></div><div class="note success modern"><p>success 提示块标签</p></div><div class="note info modern"><p>info 提示块标签</p></div><div class="note warning modern"><p>warning 提示块标签</p></div><div class="note danger modern"><p>danger 提示块标签</p></div><p>3.<code>flat</code>样式</p><div class="note flat"><p>默认 提示块标签</p></div><div class="note default flat"><p>default 提示块标签</p></div><div class="note primary flat"><p>primary 提示块标签</p></div><div class="note success flat"><p>success 提示块标签</p></div><div class="note info flat"><p>info 提示块标签</p></div><div class="note warning flat"><p>warning 提示块标签</p></div><div class="note danger flat"><p>danger 提示块标签</p></div><p>4.<code>disabled</code>样式</p><div class="note disabled"><p>默认 提示块标签</p></div><div class="note default disabled"><p>default 提示块标签</p></div><div class="note primary disabled"><p>primary 提示块标签</p></div><div class="note success disabled"><p>success 提示块标签</p></div><div class="note info disabled"><p>info 提示块标签</p></div><div class="note warning disabled"><p>warning 提示块标签</p></div><div class="note danger disabled"><p>danger 提示块标签</p></div><p>5.<code>no-icon</code>样式</p><div class="note no-icon flat"><p>默认 提示块标签</p></div><div class="note default no-icon flat"><p>default 提示块标签</p></div><div class="note primary no-icon flat"><p>primary 提示块标签</p></div><div class="note success no-icon flat"><p>success 提示块标签</p></div><div class="note info no-icon flat"><p>info 提示块标签</p></div><div class="note warning no-icon flat"><p>warning 提示块标签</p></div><div class="note danger no-icon flat"><p>danger 提示块标签</p></div></div></details><details class="folding-tag" blue><summary>2.外部icon</summary><div class="content"><p>1.<code>simple</code>样式</p><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了…</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><p>2.<code>modern</code>样式</p><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了…</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding modern"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><p>3.<code>flat</code>样式</p><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了…</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding flat"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><p>4.<code>disabled</code>样式</p><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了…</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding disabled"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><p>5.<code>no-icon</code>样式</p><div class="note no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue no-icon flat"><p>2021年快到了…</p></div><div class="note pink no-icon flat"><p>小心开车 安全至上</p></div><div class="note red no-icon flat"><p>这是三片呢？还是四片？</p></div><div class="note orange no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple no-icon flat"><p>剪刀石头布</p></div><div class="note green no-icon flat"><p>前端最讨厌的浏览器</p></div></div></details></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-5-上标标签-tip">2.5 上标标签 tip</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>样式</code>: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li><code>自定义图标</code>: 支持fontawesome。</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip %&#125;default&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip info %&#125;info&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip success %&#125;success&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip error %&#125;error&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip warning %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bolt %&#125;bolt&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban %&#125;ban&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip home %&#125;home&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip sync %&#125;sync&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip cogs %&#125;cogs&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip key %&#125;key&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bell %&#125;bell&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip fa-atom %&#125;自定义font awesome图标&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="tip"><p>default</p></div><div class="tip info"><p>info</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义font awesome图标</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-6-动态标签-anima">2.6 动态标签 anima</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><div class="note info flat"><ol><li>将所需的CSS类添加到图标（或DOM中的任何元素）。</li><li>对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类<code>faa-parent animated-hover</code>。（详情见示例及示例源码）<br>You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow</li><li>可以通过给目标元素添加CSS类<code>faa-fast</code>或<code>faa-slow</code>来控制动画快慢。</li></ol></div></div><div class="tab-item-content" id="分栏-3"><p>1.On DOM load（当页面加载时显示动画）</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><p>2.调整动画速度</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated faa-fast %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated faa-slow %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><p>3.On hover（当鼠标悬停时显示动画）</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated-hover %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated-hover %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><p>4.On parent hover（当鼠标悬停在父级元素时显示动画）</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-parent animated-hover %&#125;<span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;faa-horizontal&quot;</span>&gt;</span></span>warning<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-parent animated-hover %&#125;<span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;faa-flash&quot;</span>&gt;</span></span>ban<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.On DOM load（当页面加载时显示动画）</p><div class="tip warning faa-horizontal animated"><p>warning</p></div><div class="tip ban faa-flash animated"><p>ban</p></div>2.调整动画速度<div class="tip warning faa-horizontal animated faa-fast"><p>warning</p></div><div class="tip ban faa-flash animated faa-slow"><p>ban</p></div>3.On hover（当鼠标悬停时显示动画）<div class="tip warning faa-horizontal animated-hover"><p>warning</p></div><div class="tip ban faa-flash animated-hover"><p>ban</p></div>4.On parent hover（当鼠标悬停在父级元素时显示动画）<div class="tip warning faa-parent animated-hover"><p class="faa-horizontal">warning</p></div><div class="tip ban faa-parent animated-hover"><p class="faa-flash">ban</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-7-复选列表-checkbox">2.7 复选列表 checkbox</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>样式</code>: plus, minus, times</li><li><code>颜色</code>: red,yellow,green,cyan,blue,gray</li><li><code>选中状态</code>: checked</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 纯文本测试 %&#125;</span><br><span class="line">&#123;% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% checkbox red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% checkbox green checked, 绿色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox yellow checked, 黄色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox cyan checked, 青色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox blue checked, 蓝色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox plus green checked, 增加 %&#125;</span><br><span class="line">&#123;% checkbox minus yellow checked, 减少 %&#125;</span><br><span class="line">&#123;% checkbox times red checked, 叉 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="checkbox"><input type="checkbox"><p>纯文本测试</p></div><div class="checkbox checked"><input type="checkbox" checked><p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p></div><div class="checkbox red"><input type="checkbox"><p>支持自定义颜色</p></div><div class="checkbox green checked"><input type="checkbox" checked><p>绿色 + 默认选中</p></div><div class="checkbox yellow checked"><input type="checkbox" checked><p>黄色 + 默认选中</p></div><div class="checkbox cyan checked"><input type="checkbox" checked><p>青色 + 默认选中</p></div><div class="checkbox blue checked"><input type="checkbox" checked><p>蓝色 + 默认选中</p></div><div class="checkbox plus green checked"><input type="checkbox" checked><p>增加</p></div><div class="checkbox minus yellow checked"><input type="checkbox" checked><p>减少</p></div><div class="checkbox times red checked"><input type="checkbox" checked><p>叉</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-8-单选列表-radio">2.8 单选列表 radio</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>颜色</code>: red,yellow,green,cyan,blue,gray</li><li><code>选中状态</code>: checked</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 纯文本测试 %&#125;</span><br><span class="line">&#123;% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% radio red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% radio green, 绿色 %&#125;</span><br><span class="line">&#123;% radio yellow, 黄色 %&#125;</span><br><span class="line">&#123;% radio cyan, 青色 %&#125;</span><br><span class="line">&#123;% radio blue, 蓝色 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="checkbox"><input type="radio"><p>纯文本测试</p></div><div class="checkbox checked"><input type="radio" checked><p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p></div><div class="checkbox red"><input type="radio"><p>支持自定义颜色</p></div><div class="checkbox green"><input type="radio"><p>绿色</p></div><div class="checkbox yellow"><input type="radio"><p>黄色</p></div><div class="checkbox cyan"><input type="radio"><p>青色</p></div><div class="checkbox blue"><input type="radio"><p>蓝色</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-9-时间轴-timeline">2.9 时间轴 timeline</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 时间线标题（可选）[,color] %&#125;</span><br><span class="line">&lt;!-- timeline 时间节点（标题） --&gt;</span><br><span class="line">正文内容</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline 时间节点（标题） --&gt;</span><br><span class="line">正文内容</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>title</code>:标题/时间线</li><li><code>color</code>:<code>timeline</code>颜色:default(留空) / blue / pink / red / purple / orange / green</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 时间轴样式,blue %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 2020-07-24 [<span class="string">2.6.6 -&gt; 3.0</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases</span>) --&gt;</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 如果有 <span class="code">`hexo-lazyload-image`</span> 插件，需要删除并重新安装最新版本，设置 <span class="code">`lazyload.isSPA: true`</span>。</span><br><span class="line"><span class="bullet">2.</span> 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 <span class="code">`use_cdn: true`</span> 则需要删除。</span><br><span class="line"><span class="bullet">3.</span> 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。</span><br><span class="line"><span class="bullet">4.</span> 2.x 版本的置顶 <span class="code">`top: true`</span> 改为了 <span class="code">`pin: true`</span>，并且同样适用于 <span class="code">`layout: page`</span> 的页面。</span><br><span class="line"><span class="bullet">5.</span> 如果使用了 <span class="code">`hexo-offline`</span> 插件，建议卸载，3.0 版本默认开启了 pjax 服务。</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 2020-05-15 [<span class="string">2.6.3 -&gt; 2.6.6</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6</span>) --&gt;</span><br><span class="line"></span><br><span class="line">不需要额外处理。</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 2020-04-20 [<span class="string">2.6.2 -&gt; 2.6.3</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3</span>) --&gt;</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 全局搜索 <span class="code">`seotitle`</span> 并替换为 <span class="code">`seo_title`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的索引规则有变，使用 group 组件的文章内，<span class="code">`group: group_name`</span> 对应的组件名必须是 <span class="code">`group_name`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的列表名优先显示文章的 <span class="code">`short_title`</span> 其次是 <span class="code">`title`</span>。</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="timeline blue"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>时间轴样式</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2020-07-24 <a target="_blank" rel="noopener" href="https://github.com/volantis-x/hexo-theme-volantis/releases">2.6.6 -&gt; 3.0</a></p></div></div><div class="timeline-item-content"><ol><li>如果有 <code>hexo-lazyload-image</code> 插件，需要删除并重新安装最新版本，设置 <code>lazyload.isSPA: true</code>。</li><li>2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 <code>use_cdn: true</code> 则需要删除。</li><li>2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。</li><li>2.x 版本的置顶 <code>top: true</code> 改为了 <code>pin: true</code>，并且同样适用于 <code>layout: page</code> 的页面。</li><li>如果使用了 <code>hexo-offline</code> 插件，建议卸载，3.0 版本默认开启了 pjax 服务。</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2020-05-15 <a target="_blank" rel="noopener" href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6">2.6.3 -&gt; 2.6.6</a></p></div></div><div class="timeline-item-content"><p>不需要额外处理。</p></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2020-04-20 <a target="_blank" rel="noopener" href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3">2.6.2 -&gt; 2.6.3</a></p></div></div><div class="timeline-item-content"><ol><li>全局搜索 <code>seotitle</code> 并替换为 <code>seo_title</code>。</li><li>group 组件的索引规则有变，使用 group 组件的文章内，<code>group: group_name</code> 对应的组件名必须是 <code>group_name</code>。</li><li>group 组件的列表名优先显示文章的 <code>short_title</code> 其次是 <code>title</code>。</li></ol></div></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-10-链接卡片-link">2.10 链接卡片 link</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 标题, 链接, 图片链接（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.cbd.int/akilar-candyassets@1.0.36/image/siteicon/favicon.ico %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><div calss="anzhiyu-tag-link"><a class="tag-Link" target="_blank" href="https://cdn.cbd.int/akilar-candyassets@1.0.36/image/siteicon/favicon.ico"><div class="tag-link-tips">引用站外地址</div><div class="tag-link-bottom"><div class="tag-link-left"><i class="anzhiyufont anzhiyu-icon-link"></i></div><div class="tag-link-right"><div class="tag-link-title">糖果屋教程贴</div><div class="tag-link-sitename">https://akilar.top/posts/615e2dec/</div></div><i class="anzhiyufont anzhiyu-icon-angle-right"></i></div></a></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-11-按钮-btns">2.11 按钮 btns</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns 样式参数 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <code>&lt;b&gt;</code>标题<code>&lt;/b&gt;</code>和<code>&lt;p&gt;</code>描述文字<code>&lt;/p&gt;</code></li><li>布局方式：<br>默认为自动宽度，适合视野内只有一两个的情况。</li></ol><table><thead><tr><th>参数</th><th>含义</th></tr></thead><tbody><tr><td>wide</td><td>宽一点的按钮</td></tr><tr><td>fill</td><td>填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td>center</td><td>居中，按钮之间是固定间距</td></tr><tr><td>around</td><td>居中分散</td></tr><tr><td>grid2</td><td>等宽最多2列，屏幕变窄会适当减少列数</td></tr><tr><td>grid3</td><td>等宽最多3列，屏幕变窄会适当减少列数</td></tr><tr><td>grid4</td><td>等宽最多4列，屏幕变窄会适当减少列数</td></tr><tr><td>grid5</td><td>等宽最多5列，屏幕变窄会适当减少列数</td></tr></tbody></table></div><div class="tab-item-content" id="分栏-3"><p>1.如果需要显示类似「团队成员」之类的一组含有头像的链接</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle grid5 %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><p>2.或者含有图标的按钮</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns rounded grid5 %&#125;</span><br><span class="line">&#123;% cell 下载源码, /, fas fa-download %&#125;</span><br><span class="line">&#123;% cell 查看文档, /, fas fa-book-open %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><p>3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle center grid5 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1&#x27;</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;fab fa-apple&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">  &#123;% p red, 专业版 %&#125;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_pro.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1&#x27;</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;fab fa-apple&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">  &#123;% p green, 免费版 %&#125;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.如果需要显示类似「团队成员」之类的一组含有头像的链接</p><div class="btns circle grid5"><a class="button no-text-decoration" target="_blank" rel="noopener" href="https://xaoxuu.com" title="xaoxuu"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener" href="https://xaoxuu.com" title="xaoxuu"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener" href="https://xaoxuu.com" title="xaoxuu"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener" href="https://xaoxuu.com" title="xaoxuu"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener" href="https://xaoxuu.com" title="xaoxuu"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png">xaoxuu</a></div>2.或者含有图标的按钮<div class="btns rounded grid5"><a class="button no-text-decoration" href="/" title="下载源码"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="fas fa-download">下载源码</a> <a class="button no-text-decoration" href="/" title="查看文档"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="fas fa-book-open">查看文档</a></div>3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中<div class="btns circle center grid5"><a target="_blank" rel="noopener" href="https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1"><i class="fab fa-apple"></i> <b>心率管家</b><p class="p red">专业版</p><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_pro.png"></a><a target="_blank" rel="noopener" href="https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1"><i class="fab fa-apple"></i> <b>心率管家</b><p class="p green">免费版</p><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png"></a></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-12-github卡片-ghcard">2.12 github卡片 ghcard</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% ghcard 用户名, 其它参数（可选） %&#125;</span><br><span class="line">&#123;% ghcard 用户名/仓库, 其它参数（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><p>使用<code>,</code>分割各个参数。写法为：<code>参数名=参数值</code><br>以下只写几个常用参数值。</p><table><thead><tr><th><strong>参数名</strong></th><th>取值</th><th>释义</th></tr></thead><tbody><tr><td>hide</td><td>stars,commits,prs,issues,contribs</td><td>隐藏指定统计</td></tr><tr><td>count_private</td><td>true</td><td>将私人项目贡献添加到总提交计数中</td></tr><tr><td>show_icons</td><td>true</td><td>显示图标</td></tr><tr><td>theme</td><td>查阅:<a target="_blank" rel="noopener" href="https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md">Available Themes</a></td><td>主题</td></tr></tbody></table></div><div class="tab-item-content" id="分栏-3"><p>1.用户信息卡片</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| &#123;% ghcard fomalhaut1998 %&#125; | &#123;% ghcard fomalhaut1998, theme=vue %&#125; |</span><br><span class="line">| -- | -- |</span><br><span class="line">| &#123;% ghcard fomalhaut1998, theme=buefy %&#125; | &#123;% ghcard fomalhaut1998, theme=solarized-light %&#125; |</span><br><span class="line">| &#123;% ghcard fomalhaut1998, theme=onedark %&#125; | &#123;% ghcard fomalhaut1998, theme=solarized-dark %&#125; |</span><br><span class="line">| &#123;% ghcard fomalhaut1998, theme=algolia %&#125; | &#123;% ghcard fomalhaut1998, theme=calm %&#125; |</span><br></pre></td></tr></table></figure><p>2.仓库信息卡片</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| &#123;% ghcard volantis-x/hexo-theme-volantis %&#125; | &#123;% ghcard volantis-x/hexo-theme-volantis, theme=vue %&#125; |</span><br><span class="line">| -- | -- |</span><br><span class="line">| &#123;% ghcard volantis-x/hexo-theme-volantis, theme=buefy %&#125; | &#123;% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %&#125; |</span><br><span class="line">| &#123;% ghcard volantis-x/hexo-theme-volantis, theme=onedark %&#125; | &#123;% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %&#125; |</span><br><span class="line">| &#123;% ghcard volantis-x/hexo-theme-volantis, theme=algolia %&#125; | &#123;% ghcard volantis-x/hexo-theme-volantis, theme=calm %&#125; |</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.用户信息卡片</p><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&show_owner=true"></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=vue&show_owner=true"></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=buefy&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=solarized-light&show_owner=true"></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=onedark&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=solarized-dark&show_owner=true"></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=algolia&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/fomalhaut1998"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/?username=fomalhaut1998&theme=calm&show_owner=true"></a></td></tr></tbody></table><p>2.仓库信息卡片</p><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&show_owner=true"></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=vue&show_owner=true"></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=buefy&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=solarized-light&show_owner=true"></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=onedark&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=solarized-dark&show_owner=true"></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=algolia&show_owner=true"></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=calm&show_owner=true"></a></td></tr></tbody></table></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-13-github徽标-ghbdage">2.13 github徽标 ghbdage</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage [right],[left],[logo]||[color],[link],[title]||[option] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>left</code>：徽标左边的信息，必选参数。</li><li><code>right</code>: 徽标右边的信息，必选参数，</li><li><code>logo</code>：徽标图标，图标名称详见<a target="_blank" rel="noopener" href="https://simpleicons.org/">simpleicons</a>，可选参数。</li><li><code>color</code>：徽标右边的颜色，可选参数。</li><li><code>link</code>：指向的链接，可选参数。</li><li><code>title</code>：徽标的额外信息，可选参数。主要用于优化SEO，但<code>object</code>标签不会像<code>a</code>标签一样在鼠标悬停显示<code>title</code>信息。</li><li><code>option</code>：自定义参数，支持<a target="_blank" rel="noopener" href="https://shields.io/">shields.io</a>的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为<code>name1=value2&amp;name2=value2</code>。</li></ol></div><div class="tab-item-content" id="分栏-3"><p>1.基本参数,定义徽标左右文字和图标</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage Theme,Butterfly %&#125;</span><br><span class="line">&#123;% bdage Frame,Hexo,hexo %&#125;</span><br></pre></td></tr></table></figure><p>2.信息参数，定义徽标右侧内容背景色，指向链接</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %&#125;</span><br><span class="line">//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割</span><br><span class="line">&#123;% bdage Source,GitHub,GitHub||,https://github.com/ %&#125;</span><br></pre></td></tr></table></figure><p>3.拓展参数，支持shields的API的全部参数内容</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&amp;logoWidth=20 %&#125;</span><br><span class="line">//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割</span><br><span class="line">&#123;% bdage Hosted,Vercel,Vercel||||style=social&amp;logoWidth=20&amp;logoColor=violet %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.基本参数,定义徽标左右文字和图标</p><p><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Butterfly-Theme-orange?logo=&color=orange&link=&"></object><br><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Hexo-Frame-orange?logo=hexo&color=orange&link=&"></object></p><p>2.信息参数，定义徽标右侧内容背景色，指向链接</p><p><object class="ghbdage" style="margin-inline:5px" title="本站使用JsDelivr为静态资源提供CDN加速" standby="loading..." data="https://img.shields.io/badge/JsDelivr-CDN-orange?logo=jsDelivr&color=abcdef&link=https://metroui.org.ua/index.html&"></object><br>//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割<br><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/GitHub-Source-orange?logo=GitHub&color=orange&link=https://github.com/&"></object></p><p>3.拓展参数，支持shields的API的全部参数内容</p><p><object class="ghbdage" style="margin-inline:5px" title="本站采用双线部署，默认线路托管于Vercel" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&color=brightgreen&link=https://vercel.com/&style=social&logoWidth=20"></object><br>//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割<br><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&color=orange&link=&style=social&logoWidth=20&logoColor=violet"></object></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-14-网站卡片-sites">2.14 网站卡片 sites</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/avatar/avatar.png, description=简约风格 %&#125;</span><br><span class="line">&#123;% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener" href="https://fomalhaut1998.com" data-title="简约风格"><div class="wrapper cover"><img class="cover fadeIn" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg"></div><div class="info"><img class="flink-avatar" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/avatar/avatar.png"><span class="site-title">fomalhaut1998</span></div></a><a class="site-card" target="_blank" rel="noopener" href="https://inkss.cn" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg"></div><div class="info"><img class="flink-avatar" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg"><span class="site-title">inkss</span></div></a><a class="site-card" target="_blank" rel="noopener" href="https://blog.mhuig.top" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png"></div><div class="info"><img class="flink-avatar" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png"><span class="site-title">MHuiG</span></div></a><a class="site-card" target="_blank" rel="noopener" href="https://colsrch.top" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"></div><div class="info"><img class="flink-avatar" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg"><span class="site-title">Colsrch</span></div></a><a class="site-card" target="_blank" rel="noopener" href="https://linhk1606.github.io" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png"></div><div class="info"><img class="flink-avatar" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png"><span class="site-title">Linhk1606</span></div></a></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-15-行内图片-inlineimage">2.15 行内图片 inlineimage</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineimage 图片链接, height=高度（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>高度</code>：height=20px</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">这是 &#123;% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %&#125; 一段话。</span><br><span class="line"></span><br><span class="line">这又是 &#123;% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %&#125; 一段话。</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>这是 <img no-lazy class="inline" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif" style="height:1.5em"> 一段话。</p><p>这又是 <img no-lazy class="inline" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif" style="height:40px"> 一段话。</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-16-单张图片-image">2.16 单张图片 image</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li>图片宽度高度：width=300px, height=32px</li><li>图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg=#f2f2f2</li></ol></div><div class="tab-item-content" id="分栏-3"><p>1.添加描述：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><p>2.指定宽度</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %&#125;</span><br></pre></td></tr></table></figure><p>3.指定宽度并添加描述：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><p>4.设置占位背景色：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.添加描述：</p><div class="img-wrap"><div class="img-bg"><img class="img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。"></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div>2..指定宽度<div class="img-wrap"><div class="img-bg"><img class="img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" style="width:400px"></div></div>3.指定宽度并添加描述：<div class="img-wrap"><div class="img-bg"><img class="img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px"></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div>4.设置占位背景色：<div class="img-wrap"><div class="img-bg" style="background:#1d0c04"><img class="img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="优化不同宽度浏览的观感" style="width:400px"></div><span class="image-caption">优化不同宽度浏览的观感</span></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-17-音频-audio">2.17 音频 audio</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio 音频链接 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><div class="audio"><audio controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3" type="audio/mp3">Your browser does not support the audio tag.</audio></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-18-视频-video">2.18 视频 video</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">标签语法</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video 视频链接 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>对齐方向</code>：left, center, right</li><li><code>列数</code>：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol></div><div class="tab-item-content" id="分栏-3"><p>1.100%宽度</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br></pre></td></tr></table></figure><p>2.50%宽度</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 2 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><p>3.25%宽度</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 4 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.100%宽度</p><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div>2.50%宽度<div class="videos" col="2"><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div></div>3.25%宽度<div class="videos" col="4"><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src="https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov" type="video/mp4">Your browser does not support the video tag.</video></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-19-相册-gallery">2.19 相册 gallery</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><p>1.gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>2.gallery 相册</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 圖片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ul><li>gallerygroup 相册图库</li></ul><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>name</td><td>图库名字</td></tr><tr><td>description</td><td>图库描述</td></tr><tr><td>link</td><td>链接到对应相册的地址</td></tr><tr><td>img-url</td><td>图库封面</td></tr></tbody></table><ul><li><p>gallery 相册</p><p>区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</p></li></ul></div><div class="tab-item-content" id="分栏-3"><p>1.gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 &#x27;/gallery/MC/&#x27; https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %&#125;</span><br><span class="line">&#123;% galleryGroup Gundam 哦咧哇gundam哒！ &#x27;/gallery/Gundam/&#x27; https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %&#125;</span><br><span class="line">&#123;% galleryGroup I-am-Akilar 某种意义上也算自拍吧 &#x27;/gallery/I-am-Akilar/&#x27; https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>2.gallery 相册</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.gallerygroup 相册图库</p><div class="gallery-group-main"><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">MC</div><p>在Rikkaの六花服务器里留下的足迹</p><a href="/gallery/MC/"></a></figcaption></figure><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">Gundam</div><p>哦咧哇gundam哒！</p><a href="/gallery/Gundam/"></a></figcaption></figure><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">I-am-Akilar</div><p>某种意义上也算自拍吧</p><a href="/gallery/I-am-Akilar/"></a></figcaption></figure></div>2.gallery 相册<div class="gallery"><div class="fj-gallery page_img_lazyload data" data-rowheight="220" data-limit="10"><span class="gallery-data">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""}]</span></div><button class="gallery-load-more" style="opacity:0"><span>加载更多</span><i class="anzhiyufont anzhiyu-icon-arrow-down"></i></button></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-20-折叠框-folding">2.20 折叠框 folding</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><p>1.gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 参数（可选）, 标题 %&#125;</span><br><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure><ol><li><p><code>颜色</code>：blue, cyan, green, yellow, red</p></li><li><p><code>状态</code>：状态填写 open 代表默认打开。</p></li></ol></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 查看图片测试 %&#125;</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding cyan open, 查看默认打开的折叠框 %&#125;</span><br><span class="line"></span><br><span class="line">这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding green, 查看代码测试 %&#125;</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding yellow, 查看列表测试 %&#125;</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding red, 查看嵌套测试 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding blue, 查看嵌套测试2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding 查看嵌套测试3 %&#125;</span><br><span class="line"></span><br><span class="line">hahaha <span class="language-xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png&#x27;</span> <span class="attr">style</span>=<span class="string">&#x27;height:24px&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><details class="folding-tag"><summary>查看图片测试</summary><div class="content"><p><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg" alt=""></p></div></details><details class="folding-tag" cyan open><summary>查看默认打开的折叠框</summary><div class="content"><p>这是一个默认打开的折叠框。</p></div></details><details class="folding-tag" green><summary>查看代码测试</summary><div class="content"><p>假装这里有代码块（代码块没法嵌套代码块）</p></div></details><details class="folding-tag" yellow><summary>查看列表测试</summary><div class="content"><ul><li>haha</li><li>hehe</li></ul></div></details><details class="folding-tag" red><summary>查看嵌套测试</summary><div class="content"><details class="folding-tag" blue><summary>查看嵌套测试2</summary><div class="content"><details class="folding-tag"><summary>查看嵌套测试3</summary><div class="content"><p>hahaha <span><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png" style="height:24px"></span></p></div></details></div></details></div></details></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-21-分栏-tab">2.21 分栏 tab</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">配置参数</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs Unique name, [index] %&#125;</span><br><span class="line">&lt;!-- tab [Tab caption] [@icon] --&gt;</span><br><span class="line">Any content (support inline tags too).</span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><p>Unique name :</p><ul><li><p>选项卡块标签的唯一名称，不带逗号。</p></li><li><p>将在#id中用作每个标签及其索引号的前缀。</p></li><li><p>如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。</p></li><li><p>仅当前帖子/页面的URL必须是唯一的！</p></li></ul></li><li><p>[index]:</p><ul><li><p>活动选项卡的索引号。</p></li><li><p>如果未指定，将选择第一个标签（1）。</p></li><li><p>如果index为-1，则不会选择任何选项卡。</p></li><li><p>可选参数。</p></li></ul></li><li><p>[Tab caption]:</p><ul><li><p>当前选项卡的标题。</p></li><li><p>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。</p></li><li><p>如果未指定标题，但指定了图标，则标题将为空。</p></li><li><p>可选参数。</p></li></ul></li><li><p>[@icon]:</p><ul><li><p>FontAwesome图标名称（全名，看起来像“ fas fa-font”）</p></li><li><p>可以指定带空格或不带空格；</p></li><li><p>例如’Tab caption @icon’ 和 ‘Tab caption@icon’.</p></li><li><p>可选参数。</p></li></ul></li></ol></div><div class="tab-item-content" id="分栏-3"><p>1.Demo 1 - 预设选择第一个【默认】</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test1 %&#125;</span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><p>2.Demo 2 - 预设选择tabs</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test2, 3 %&#125;</span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><p>3.Demo 3 - 没有预设值</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test3, -1 %&#125;</span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><p>4.Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test4 %&#125;</span><br><span class="line">&lt;!-- tab 第一个Tab --&gt;</span><br><span class="line"><span class="strong">**tab名字为第一个Tab**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab @fab fa-apple-pay --&gt;</span><br><span class="line"><span class="strong">**只有图标 没有Tab名字**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab 炸弹@fas fa-bomb --&gt;</span><br><span class="line"><span class="strong">**名字+icon**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.Demo 1 - 预设选择第一个【默认】</p><div class="tabs" id="test1"><ul class="nav-tabs"><button type="button" class="tab active" data-href="test1-1">test1 1</button><button type="button" class="tab" data-href="test1-2">test1 2</button><button type="button" class="tab" data-href="test1-3">test1 3</button></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><p>2.Demo 2 - 预设选择tabs</p><div class="tabs" id="test2"><ul class="nav-tabs"><button type="button" class="tab" data-href="test2-1">test2 1</button><button type="button" class="tab" data-href="test2-2">test2 2</button><button type="button" class="tab active" data-href="test2-3">test2 3</button></ul><div class="tab-contents"><div class="tab-item-content" id="test2-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test2-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content active" id="test2-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><p>3.Demo 3 - 没有预设值</p><div class="tabs" id="test3"><ul class="nav-tabs no-default"><button type="button" class="tab" data-href="test3-1">test3 1</button><button type="button" class="tab" data-href="test3-2">test3 2</button><button type="button" class="tab" data-href="test3-3">test3 3</button></ul><div class="tab-contents"><div class="tab-item-content" id="test3-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test3-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content" id="test3-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><p>4.Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名</p><div class="tabs" id="test4"><ul class="nav-tabs"><button type="button" class="tab active" data-href="test4-1">第一个Tab</button><button type="button" class="tab" data-href="test4-2"><i class="fab fa-apple-pay" style="text-align:center"></i></button><button type="button" class="tab" data-href="test4-3"><i class="fas fa-bomb"></i>炸弹</button></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab名字为第一个Tab</strong></p></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有Tab名字</strong></p></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-22-诗词标签-poem">2.22 诗词标签 poem</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">参数配置</button><button type="button" class="tab" data-href="分栏-2">示例源码</button><button type="button" class="tab" data-href="分栏-3">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><ol><li><code>title</code>：诗词标题</li><li><code>author</code>：作者，可以不写</li></ol></div><div class="tab-item-content" id="分栏-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;% poem 水调歌头,苏轼 %&#125;</span><br><span class="line">丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</span><br><span class="line">明月几时有？把酒问青天。</span><br><span class="line">不知天上宫阙，今夕是何年？</span><br><span class="line">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</span><br><span class="line">起舞弄清影，何似在人间？</span><br><span class="line"></span><br><span class="line">转朱阁，低绮户，照无眠。</span><br><span class="line">不应有恨，何事长向别时圆？</span><br><span class="line">人有悲欢离合，月有阴晴圆缺，此事古难全。</span><br><span class="line">但愿人长久，千里共婵娟。</span><br><span class="line">&#123;% endpoem %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-3"><div class="poem"><div class="poem-title">水调歌头</div><div class="poem-author">苏轼</div><p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。<br>明月几时有？把酒问青天。<br>不知天上宫阙，今夕是何年？<br>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。<br>起舞弄清影，何似在人间？</p><p>转朱阁，低绮户，照无眠。<br>不应有恨，何事长向别时圆？<br>人有悲欢离合，月有阴晴圆缺，此事古难全。<br>但愿人长久，千里共婵娟。</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-23-阿里图标-icon">2.23 阿里图标 icon</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% icon [icon-xxxx],[font-size] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>icon-xxxx</code>：表示图标<code>font-class</code>,可以在自己的阿里矢量图标库项目的<code>font-class</code>引用方案内查询并复制。</li><li><code>font-size</code>：表示图标大小，直接填写数字即可，单位为<code>em</code>。图标大小默认值为<code>1em</code>。</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;% icon icon-rat<span class="emphasis">_zi %&#125;&#123;% icon icon-rat,2 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-ox_</span>chou,3 %&#125;&#123;% icon icon-ox,4 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-tiger<span class="emphasis">_yin,5 %&#125;&#123;% icon icon-tiger,6 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-rabbit_</span>mao,1 %&#125;&#123;% icon icon-rabbit,2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-dragon<span class="emphasis">_chen,3 %&#125;&#123;% icon icon-dragon,4 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-snake_</span>si,5 %&#125;&#123;% icon icon-snake,6 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-horse<span class="emphasis">_wu %&#125;&#123;% icon icon-horse,2 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-goat_</span>wei,3 %&#125;&#123;% icon icon-goat,4 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-monkey<span class="emphasis">_shen,5 %&#125;&#123;% icon icon-monkey,6 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-rooster_</span>you %&#125;&#123;% icon icon-rooster,2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-dog<span class="emphasis">_xu,3 %&#125;&#123;% icon icon-dog,4 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-boar_</span>hai,5 %&#125;&#123;% icon icon-boar,6 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p><svg class="icon" style="width:1em;height:1em" aria-hidden="true"><use xlink:href="#icon-rat_zi"></use></svg><svg class="icon" style="width:2em;height:2em" aria-hidden="true"><use xlink:href="#icon-rat"></use></svg></p><p><svg class="icon" style="width:3em;height:3em" aria-hidden="true"><use xlink:href="#icon-ox_chou"></use></svg><svg class="icon" style="width:4em;height:4em" aria-hidden="true"><use xlink:href="#icon-ox"></use></svg></p><p><svg class="icon" style="width:5em;height:5em" aria-hidden="true"><use xlink:href="#icon-tiger_yin"></use></svg><svg class="icon" style="width:6em;height:6em" aria-hidden="true"><use xlink:href="#icon-tiger"></use></svg></p><p><svg class="icon" style="width:1em;height:1em" aria-hidden="true"><use xlink:href="#icon-rabbit_mao"></use></svg><svg class="icon" style="width:2em;height:2em" aria-hidden="true"><use xlink:href="#icon-rabbit"></use></svg></p><p><svg class="icon" style="width:3em;height:3em" aria-hidden="true"><use xlink:href="#icon-dragon_chen"></use></svg><svg class="icon" style="width:4em;height:4em" aria-hidden="true"><use xlink:href="#icon-dragon"></use></svg></p><p><svg class="icon" style="width:5em;height:5em" aria-hidden="true"><use xlink:href="#icon-snake_si"></use></svg><svg class="icon" style="width:6em;height:6em" aria-hidden="true"><use xlink:href="#icon-snake"></use></svg></p><p><svg class="icon" style="width:1em;height:1em" aria-hidden="true"><use xlink:href="#icon-horse_wu"></use></svg><svg class="icon" style="width:2em;height:2em" aria-hidden="true"><use xlink:href="#icon-horse"></use></svg></p><p><svg class="icon" style="width:3em;height:3em" aria-hidden="true"><use xlink:href="#icon-goat_wei"></use></svg><svg class="icon" style="width:4em;height:4em" aria-hidden="true"><use xlink:href="#icon-goat"></use></svg></p><p><svg class="icon" style="width:5em;height:5em" aria-hidden="true"><use xlink:href="#icon-monkey_shen"></use></svg><svg class="icon" style="width:6em;height:6em" aria-hidden="true"><use xlink:href="#icon-monkey"></use></svg></p><p><svg class="icon" style="width:1em;height:1em" aria-hidden="true"><use xlink:href="#icon-rooster_you"></use></svg><svg class="icon" style="width:2em;height:2em" aria-hidden="true"><use xlink:href="#icon-rooster"></use></svg></p><p><svg class="icon" style="width:3em;height:3em" aria-hidden="true"><use xlink:href="#icon-dog_xu"></use></svg><svg class="icon" style="width:4em;height:4em" aria-hidden="true"><use xlink:href="#icon-dog"></use></svg></p><p><svg class="icon" style="width:5em;height:5em" aria-hidden="true"><use xlink:href="#icon-boar_hai"></use></svg><svg class="icon" style="width:6em;height:6em" aria-hidden="true"><use xlink:href="#icon-boar"></use></svg></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-24-特效标签wow">2.24 特效标签wow</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">示例源码</button><button type="button" class="tab" data-href="分栏-2">渲染演示</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% wow [animete],[duration],[delay],[offset],[iteration] %&#125;</span><br><span class="line">内容</span><br><span class="line">&#123;% endwow %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>animate</code>: 动画样式，效果详见<a target="_blank" rel="noopener" href="https://animate.style/">animate.css参考文档</a></li><li><code>duration</code>: 选填项，动画持续时间，单位可以是<code>ms</code>也可以是<code>s</code>。例如<code>3s</code>，<code>700ms</code>。</li><li><code>delay</code>: 选填项，动画开始的延迟时间，单位可以是<code>ms</code>也可以是<code>s</code>。例如<code>3s</code>，<code>700ms</code>。</li><li><code>offset</code>: 选填项，开始动画的距离（相对浏览器底部）</li><li><code>iteration</code>: 选填项，动画重复的次数</li></ol></div><div class="tab-item-content" id="分栏-3"><p>1.flip动画效果。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% wow animate<span class="strong">__zoomIn,5s,5s,100,10 %&#125;</span></span><br><span class="line"><span class="strong">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern%&#125;</span></span><br><span class="line"><span class="strong">`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次</span></span><br><span class="line"><span class="strong">&#123;% endnote %&#125;</span></span><br><span class="line"><span class="strong">&#123;% endwow %&#125;</span></span><br></pre></td></tr></table></figure><p>2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% wow animate<span class="strong">__zoomIn,5s,5s,100,10 %&#125;</span></span><br><span class="line"><span class="strong">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern%&#125;</span></span><br><span class="line"><span class="strong">`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次</span></span><br><span class="line"><span class="strong">&#123;% endnote %&#125;</span></span><br><span class="line"><span class="strong">&#123;% endwow %&#125;</span></span><br></pre></td></tr></table></figure><p>3.slideInRight动画效果，持续5s，延时5s</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% wow animate<span class="strong">__slideInRight,5s,5s %&#125;</span></span><br><span class="line"><span class="strong">&#123;% note orange &#x27;fas fa-car&#x27; modern%&#125;</span></span><br><span class="line"><span class="strong">`slideInRight`动画效果，持续`5s`，延时`5s`。</span></span><br><span class="line"><span class="strong">&#123;% endnote %&#125;</span></span><br><span class="line"><span class="strong">&#123;% endwow %&#125;</span></span><br></pre></td></tr></table></figure><p>4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% wow animate<span class="strong">__heartBeat,,5s,,10 %&#125;</span></span><br><span class="line"><span class="strong">&#123;% note red &#x27;fas fa-battery-half&#x27; modern%&#125;</span></span><br><span class="line"><span class="strong">`heartBeat`动画效果，延时`5s`，重复`10`次。</span></span><br><span class="line"><span class="strong">&#123;% endnote %&#125;</span></span><br><span class="line"><span class="strong">&#123;% endwow %&#125;</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>1.flip动画效果。</p><div class="wow animate__zoomIn" data-wow-duration="5s" data-wow-delay="5s" data-wow-offset="100" data-wow-iteration="10"><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p><code>zoomIn</code>动画效果，持续<code>5s</code>，延时<code>5s</code>，离底部<code>100</code>距离时启动，重复<code>10</code>次</p></div></div><p>2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次</p><div class="wow animate__zoomIn" data-wow-duration="5s" data-wow-delay="5s" data-wow-offset="100" data-wow-iteration="10"><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p><code>zoomIn</code>动画效果，持续<code>5s</code>，延时<code>5s</code>，离底部<code>100</code>距离时启动，重复<code>10</code>次</p></div></div><p>3.slideInRight动画效果，持续5s，延时5s</p><div class="wow animate__slideInRight" data-wow-duration="5s" data-wow-delay="5s" data-wow-offset="" data-wow-iteration=""><div class="note orange icon-padding modern"><i class="note-icon fas fa-car"></i><p><code>slideInRight</code>动画效果，持续<code>5s</code>，延时<code>5s</code>。</p></div></div><p>4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。</p><div class="wow animate__heartBeat" data-wow-duration="" data-wow-delay="5s" data-wow-offset="" data-wow-iteration="10"><div class="note red icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p><code>heartBeat</code>动画效果，延时<code>5s</code>，重复<code>10</code>次。</p></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-25-进度条-progress">2.25 进度条 progress</h2><div class="note info flat"><p>进度条标签参考<a target="_blank" rel="noopener" href="https://rongbuqiu.com/jdt.html">沂佰孜猫-给HEXO文章添加彩色进度条</a>。<br>源样式提取自<a target="_blank" rel="noopener" href="https://zwying0814.gitbook.io/cuteen/">Cuteen</a>主题。</p></div><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">参数配置</button><button type="button" class="tab" data-href="分栏-2">标签语法</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% progress [width] [color] [text] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>width</code>: 0到100的阿拉伯数字</li><li><code>color</code>: 颜色，取值有red,yellow,green,cyan,blue,gray</li><li><code>text</code>:进度条上的文字内容</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% progress 10 red 进度条样式预览 %&#125;</span><br><span class="line">&#123;% progress 30 yellow 进度条样式预览 %&#125;</span><br><span class="line">&#123;% progress 50 green 进度条样式预览 %&#125;</span><br><span class="line">&#123;% progress 70 cyan 进度条样式预览 %&#125;</span><br><span class="line">&#123;% progress 90 blue 进度条样式预览 %&#125;</span><br><span class="line">&#123;% progress 100 gray 进度条样式预览 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-red" style="width:10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-yellow" style="width:30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-green" style="width:50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-cyan" style="width:70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-blue" style="width:90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-gray" style="width:100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-26-注释-notation">2.26 注释 notation</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% nota [label] , [text] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><p><code>label</code>: 注释词汇</p></li><li><p><code>text</code>: 悬停显示的注解内容</p></li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p><span class="nota" data-nota="可以看到注解内容出现在顶栏">把鼠标移动到我上面试试</span></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-27-气泡注释-bubble">2.27 气泡注释 bubble</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bubble [content] , [notation] ,[background-color] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>content</code>: 注释词汇</li><li><code>notation</code>: 悬停显示的注解内容</li><li><code>background-color</code>: 可选，气泡背景色。默认为“#71a4e3”</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的&#123;% bubble 兄弟相邻选择器,&quot;例如 h1 + p &#123;margin-top:50px;&#125;&quot; %&#125;，&#123;% bubble flex布局,&quot;Flex 是 Flexible Box 的缩写，意为&quot;弹性布局&quot;，用来为盒状模型提供最大的灵活性&quot;,&quot;#ec5830&quot; %&#125;，&#123;% bubble transform变换,&quot;transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。&quot;,&quot;#1db675&quot; %&#125;，animation的&#123;% bubble 贝塞尔速度曲线,&quot;贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋&quot;,&quot;#de4489&quot; %&#125;写法，还有今天刚看到的&#123;% bubble clip-path,&quot;clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。&quot;,&quot;#868fd7&quot; %&#125;属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的<span class="bubble-content">兄弟相邻选择器</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#71a4e3">例如 h1 + p {margin-top:50px;}</span></span>，<span class="bubble-content">flex布局</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#ec5830">Flex 是 Flexible Box 的缩写，意为弹性布局&quot;，用来为盒状模型提供最大的灵活性&quot;</span></span>，<span class="bubble-content">transform变换</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#1db675">transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span></span>，animation的<span class="bubble-content">贝塞尔速度曲线</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#de4489">贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋</span></span>写法，还有今天刚看到的<span class="bubble-content">clip-path</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#868fd7">clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</span></span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-28-引用文献-reference">2.28 引用文献 reference</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% referto [id] , [literature] %&#125;</span><br><span class="line">&#123;% referfrom [id] , [literature] , [url] %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><p>referto 引用上标</p><ul><li><p><code>id</code>: 上标序号内容，需与referfrom标签的id对应才能实现跳转</p></li><li><p><code>literature</code>: 引用的参考文献名称</p></li></ul></li><li><p>referfrom 引用出处</p><ul><li><p><code>id</code>: 序号内容，需与referto标签的id对应才能实现 跳转</p></li><li><p><code>literature</code>: 引用的参考文献名称</p></li><li><p><code>url</code>: 引用的参考文献链接，可省略</p></li></ul></li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">Akilarの糖果屋(akilar.top)是一个私人性质的博客&#123;% referto &#x27;[1]&#x27;,&#x27;Akilarの糖果屋群聊简介&#x27; %&#125;，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架&#123;% referto &#x27;[2]&#x27;,&#x27;Hexo中文文档&#x27; %&#125;，Butterfly主题&#123;% referto &#x27;[3]&#x27;,&#x27;Butterfly 安装文档(一) 快速开始&#x27; %&#125;</span><br><span class="line"></span><br><span class="line">本项目参考了Volantis&#123;% referto &#x27;[4]&#x27;,&#x27;hexo-theme-volantis 标签插件&#x27; %&#125;的标签样式。引入<span class="code">`[tag].js`</span>，并针对<span class="code">`butterfly`</span>主题修改了相应的<span class="code">`[tag].styl`</span>。在此鸣谢<span class="code">`Volantis`</span>主题众开发者。</span><br><span class="line">主要参考内容包括各个volantis的内置标签插件文档&#123;% referto &#x27;[5]&#x27;,&#x27;Volantis文档:内置标签插件&#x27; %&#125;</span><br><span class="line">Butterfly主题的各个衍生魔改&#123;% referto &#x27;[6]&#x27;,&#x27;Butterfly 安装文档:标签外挂（Tag Plugins&#x27; %&#125;&#123;% referto &#x27;[7]&#x27;,&#x27;小弋の生活馆全样式预览&#x27; %&#125;&#123;% referto &#x27;[8]&#x27;,&#x27;l-lin-font-awesome-animation&#x27; %&#125;&#123;% referto &#x27;[9]&#x27;,&#x27;小康的butterfly主题使用文档&#x27; %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% referfrom &#x27;[1]&#x27;,&#x27;Akilarの糖果屋群聊简介&#x27;,&#x27;https://jq.qq.com/?<span class="emphasis">_wv=1027&amp;k=pGLB2C0N&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[2]&#x27;,&#x27;Hexo中文文档&#x27;,&#x27;https://hexo.io/zh-cn/docs/&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[3]&#x27;,&#x27;Butterfly 安装文档(一) 快速开始&#x27;,&#x27;https://butterfly.js.org/posts/21cfbf15/&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[4]&#x27;,&#x27;hexo-theme-volantis 标签插件&#x27;,&#x27;https://volantis.js.org/v5/tag-plugins/&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[5]&#x27;,&#x27;Volantis文档:内置标签插件&#x27;,&#x27;https://volantis.js.org/tag-plugins/&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[6]&#x27;,&#x27;Butterfly 安装文档:标签外挂（Tag Plugins&#x27;,&#x27;https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[7]&#x27;,&#x27;小弋の生活馆全样式预览&#x27;,&#x27;https://lovelijunyi.gitee.io/posts/c898.html&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[8]&#x27;,&#x27;l-lin-font-awesome-animation&#x27;,&#x27;https://github.com/l-lin/font-awesome-animation&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% referfrom &#x27;[9]&#x27;,&#x27;小康的butterfly主题使用文档&#x27;,&#x27;https://www.antmoe.com/posts/3b43914f/&#x27; %&#125;</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>Akilarの糖果屋(akilar.top)是一个私人性质的博客<span class="hidden-anchor" id="referto_[1]"></span><sup class="reference"><a href="#referfrom_[1]">[1]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Akilarの糖果屋群聊简介</span><span class="reference-title">参考资料</span></span></span>，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架<span class="hidden-anchor" id="referto_[2]"></span><sup class="reference"><a href="#referfrom_[2]">[2]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Hexo中文文档</span><span class="reference-title">参考资料</span></span></span>，Butterfly主题<span class="hidden-anchor" id="referto_[3]"></span><sup class="reference"><a href="#referfrom_[3]">[3]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Butterfly 安装文档(一) 快速开始</span><span class="reference-title">参考资料</span></span></span></p><p>本项目参考了Volantis<span class="hidden-anchor" id="referto_[4]"></span><sup class="reference"><a href="#referfrom_[4]">[4]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">hexo-theme-volantis 标签插件</span><span class="reference-title">参考资料</span></span></span>的标签样式。引入<code>[tag].js</code>，并针对<code>butterfly</code>主题修改了相应的<code>[tag].styl</code>。在此鸣谢<code>Volantis</code>主题众开发者。<br>主要参考内容包括各个volantis的内置标签插件文档<span class="hidden-anchor" id="referto_[5]"></span><sup class="reference"><a href="#referfrom_[5]">[5]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Volantis文档:内置标签插件</span><span class="reference-title">参考资料</span></span></span><br>Butterfly主题的各个衍生魔改<span class="hidden-anchor" id="referto_[6]"></span><sup class="reference"><a href="#referfrom_[6]">[6]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Butterfly 安装文档:标签外挂（Tag Plugins</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[7]"></span><sup class="reference"><a href="#referfrom_[7]">[7]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">小弋の生活馆全样式预览</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[8]"></span><sup class="reference"><a href="#referfrom_[8]">[8]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">l-lin-font-awesome-animation</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[9]"></span><sup class="reference"><a href="#referfrom_[9]">[9]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">小康的butterfly主题使用文档</span><span class="reference-title">参考资料</span></span></span></p><div class="reference-source"><span class="hidden-anchor" id="referfrom_[1]"></span><a class="reference-anchor" href="#referto_[1]">[1]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://jq.qq.com/?_wv=1027&k=pGLB2C0N">Akilarの糖果屋群聊简介</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[2]"></span><a class="reference-anchor" href="#referto_[2]">[2]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/">Hexo中文文档</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[3]"></span><a class="reference-anchor" href="#referto_[3]">[3]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://butterfly.js.org/posts/21cfbf15/">Butterfly 安装文档(一) 快速开始</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[4]"></span><a class="reference-anchor" href="#referto_[4]">[4]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://volantis.js.org/v5/tag-plugins/">hexo-theme-volantis 标签插件</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[5]"></span><a class="reference-anchor" href="#referto_[5]">[5]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://volantis.js.org/tag-plugins/">Volantis文档:内置标签插件</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[6]"></span><a class="reference-anchor" href="#referto_[6]">[6]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">Butterfly 安装文档:标签外挂（Tag Plugins</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[7]"></span><a class="reference-anchor" href="#referto_[7]">[7]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://lovelijunyi.gitee.io/posts/c898.html">小弋の生活馆全样式预览</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[8]"></span><a class="reference-anchor" href="#referto_[8]">[8]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://github.com/l-lin/font-awesome-animation">l-lin-font-awesome-animation</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[9]"></span><a class="reference-anchor" href="#referto_[9]">[9]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" target="_blank" rel="noopener" href="https://www.antmoe.com/posts/3b43914f/">小康的butterfly主题使用文档</a></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-29-PDF展示">2.29 PDF展示</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% pdf 文件路径 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li><code>文件路径</code>: 可以是相对路径或者是在线链接</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 1.本地文件:在md文件路径下创建一个同名文件夹，其内放pdf文件名为xxx.pdf的文件</span></span><br><span class="line">&#123;% pdf xxx.pdf %&#125;</span><br><span class="line"><span class="section"># 2.在线链接</span></span><br><span class="line">&#123;% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><p>2.在线链接(要放到最外层才能起作用)</p><pre><code>&lt;div class=&quot;row&quot;&gt;
&lt;embed src=&quot;https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf&quot; width=&quot;100%&quot; height=&quot;550&quot; type=&quot;application/pdf&quot;&gt;
&lt;/div&gt;
</code></pre></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-30-Hexo-tag-map-插件">2.30 Hexo-tag-map 插件</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><table><thead><tr><th style="text-align:center">地图名</th><th style="text-align:center">标签值 &lt;必填&gt;</th><th style="text-align:center">宽 (默认 100%) / 高 (默认 360px)</th><th style="text-align:center">缩放等级 (默认 14)</th><th style="text-align:center">宽 (默认 100%) / 高 (默认 360px)</th><th style="text-align:center">默认图层 (默认 1)</th></tr></thead><tbody><tr><td style="text-align:center">混合地图</td><td style="text-align:center">map</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 3~18</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~7</td></tr><tr><td style="text-align:center">谷歌地图</td><td style="text-align:center">googleMap</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~20</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~3</td></tr><tr><td style="text-align:center">高德地图</td><td style="text-align:center">gaodeMap</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 3~18</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~3</td></tr><tr><td style="text-align:center">百度地图</td><td style="text-align:center">baiduMap</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 4~18</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~2</td></tr><tr><td style="text-align:center">Geoq 地图</td><td style="text-align:center">geoqMap</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~18</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~5</td></tr><tr><td style="text-align:center">openstreet 地图</td><td style="text-align:center">openstreetMap</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">取值 1~18</td><td style="text-align:center">百分数或具体值 (100% 或 360px)</td><td style="text-align:center">不支持此参数</td></tr></tbody></table><ol><li>参数之间，用英文逗号相隔</li><li>参数必须按上述事例顺序输入，不得为空</li><li>同一个页面，同一组经纬度值，只能插入一个相同标签值的地图 (若有需要，可以将第二个地图上，经度或纬度末尾删除一两个数)</li><li>参数取值必须在上述范围内</li><li>默认图层：即地图叠加层的值，默认常规地图还是卫星地图，可按地图显示顺序取值</li><li>缩放等级，数字越大，地图比例尺越小，显示的越精细</li><li>除标签值外，其他参数选填，但 每个参数的左边的参数必填</li><li>谷歌地图需要外网才能加载查看</li></ol><p>坐标获取：<a target="_blank" rel="noopener" href="https://lbs.amap.com/tools/picker">高德地图坐标拾取系统</a> 、<a target="_blank" rel="noopener" href="https://api.map.baidu.com/lbsapi/getpoint/index.html">百度地图坐标拾取系统</a></p></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% map 120.101101,30.239119 %&#125;</span><br><span class="line">&#123;% googleMap 120.101101,30.239119, 这里是西湖灵隐寺，据说求姻缘很灵验哦！ %&#125;</span><br><span class="line">&#123;% geoqMap 120.101101,30.239119, 这里是西湖灵隐寺，据说求姻缘很灵验哦！, 13, 90%, 320px, 3 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><link rel="stylesheet" href="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.css"><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.js"></script><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet.ChineseTmsProviders@1.0.4.js"></script><div class="map-box" style="margin:.8rem 0 1.6rem 0"><div id="map-120.101101-30.239119" style="max-width:100%;height:360px;display:block;margin:0 auto;z-index:1;border-radius:5px"></div></div><script>var normalm=L.tileLayer.chinaProvider("GaoDe.Normal.Map",{maxZoom:20,minZoom:1,attribution:"高德地图"}),imgm=L.tileLayer.chinaProvider("GaoDe.Satellite.Map",{maxZoom:20,minZoom:1,attribution:"高德地图"}),imga=L.tileLayer.chinaProvider("GaoDe.Satellite.Annotion",{maxZoom:20,minZoom:1,attribution:"高德地图"}),normalMap=L.tileLayer.chinaProvider("Google.Normal.Map",{maxZoom:20,minZoom:1,attribution:"Google Maps"}),satelliteMap=L.tileLayer.chinaProvider("Google.Satellite.Map",{maxZoom:21,minZoom:1,attribution:"Google Maps"});routeMap=L.tileLayer.chinaProvider("Google.Satellite.Annotion",{maxZoom:21,minZoom:1});normalMap=L.tileLayer.chinaProvider("Google.Normal.Map",{maxZoom:21,minZoom:1,attribution:"Google Maps"}),satelliteMap=L.tileLayer.chinaProvider("Google.Satellite.Map",{maxZoom:21,minZoom:1,attribution:"Google Maps"});var routeMap=L.tileLayer.chinaProvider("Google.Satellite.Annotion",{maxZoom:21,minZoom:1,attribution:"Google Maps"}),normalm1=L.tileLayer.chinaProvider("Geoq.Normal.Map",{maxZoom:21,minZoom:1,attribution:"GeoQ"}),normal=L.layerGroup([normalm]),image=L.layerGroup([imgm,imga]),baseLayers={"高德地图":normal,"智图地图":normalm1,"谷歌地图":normalMap,"高德卫星地图":imgm,"谷歌卫星地图":satelliteMap,"高德卫星标注":image,"谷歌卫星标注":routeMap},mymap=L.map("map-120.101101-30.239119",{center:[30.239119,120.101101],zoom:14,layers:[normal],zoomControl:!1});L.control.layers(baseLayers,null).addTo(mymap),L.control.zoom({zoomInTitle:"放大",zoomOutTitle:"缩小"}).addTo(mymap)</script><br><link rel="stylesheet" href="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.css"><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.js"></script><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet.ChineseTmsProviders@1.0.4.js"></script><div id="googleMap-120.101101-30.239119" style="max-width:100%;height:360px;display:block;margin:0 auto;z-index:1;border-radius:5px"></div><script>var normalMap=L.tileLayer.chinaProvider("Google.Normal.Map",{maxZoom:22,minZoom:1,attribution:"Google Maps"}),satelliteMap=L.tileLayer.chinaProvider("Google.Satellite.Map",{maxZoom:22,minZoom:1,attribution:"Google Maps"}),routeMap=L.tileLayer.chinaProvider("Google.Satellite.Annotion",{maxZoom:22,minZoom:1,attribution:"Google Maps"}),baseLayers={"谷歌地图":normalMap,"谷歌卫星图":satelliteMap,"谷歌卫星标注":routeMap},overlayLayers={},mymap=L.map("googleMap-120.101101-30.239119",{center:[30.239119,120.101101],zoom:14,layers:[normalMap],zoomControl:!1});L.control.layers(baseLayers,null).addTo(mymap),L.control.zoom({zoomInTitle:"放大",zoomOutTitle:"缩小"}).addTo(mymap);var marker=L.marker(["30.239119","120.101101"]).addTo(mymap);marker.bindPopup("这里是西湖灵隐寺，据说求姻缘很灵验哦！").openPopup()</script><br><link rel="stylesheet" href="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.css"><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.js"></script><script data-pjax src="//unpkg.com/hexo-tag-map/lib/leaflet.ChineseTmsProviders@1.0.4.js"></script><div id="geoqMap-120.101101-30.239119" style="max-width:90%;height:320px;display:block;margin:0 auto;z-index:1;border-radius:5px"></div><script>var normalm1=L.tileLayer.chinaProvider("Geoq.Normal.Map",{maxZoom:20,minZoom:1,attribution:"GeoQ"}),normalm2=L.tileLayer.chinaProvider("Geoq.Normal.PurplishBlue",{maxZoom:20,minZoom:1,attribution:"GeoQ"}),normalm3=L.tileLayer.chinaProvider("Geoq.Normal.Gray",{maxZoom:20,minZoom:1,attribution:"GeoQ"}),normalm4=L.tileLayer.chinaProvider("Geoq.Normal.Warm",{maxZoom:20,minZoom:1,attribution:"GeoQ"}),normalm5=L.tileLayer.chinaProvider("Geoq.Theme.Hydro",{maxZoom:20,minZoom:1,attribution:"GeoQ"}),normal=L.layerGroup([normalm1,normalm2,normalm3,normalm4,normalm5]),baseLayers={"智图地图":normalm1,"午夜蓝":normalm2,"灰色":normalm3,"暖色":normalm4,"水系":normalm5},mymap=L.map("geoqMap-120.101101-30.239119",{center:[30.239119,120.101101],zoom:13,layers:[normalm3],zoomControl:!1});L.control.layers(baseLayers,null).addTo(mymap),L.control.zoom({zoomInTitle:"放大",zoomOutTitle:"缩小"}).addTo(mymap);var marker=L.marker(["30.239119","120.101101"]).addTo(mymap);marker.bindPopup("这里是西湖灵隐寺，据说求姻缘很灵验哦！").openPopup()</script><br></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="2-31-隐藏块">2.31 隐藏块</h2><div class="tabs" id="分栏"><ul class="nav-tabs"><button type="button" class="tab active" data-href="分栏-1">标签语法</button><button type="button" class="tab" data-href="分栏-2">参数配置</button><button type="button" class="tab" data-href="分栏-3">示例源码</button><button type="button" class="tab" data-href="分栏-4">渲染演示</button></ul><div class="tab-contents"><div class="tab-item-content active" id="分栏-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-2"><ol><li>content：要隐藏的内容</li><li>display：展示前按钮显示的文字（可选）</li><li>bg：按钮的背景颜色（可选）</li><li>color：按钮显示的文字的颜色（可选）</li></ol></div><div class="tab-item-content" id="分栏-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock 点我预览, blue %&#125;</span><br><span class="line">这里有张图片：</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://s1.vika.cn/space/2022/10/30/b35fce448bc9404a8d65c3ce1e6e46eb&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;image (1)&quot;</span> <span class="attr">style</span>=<span class="string">&quot;zoom:67%;&quot;</span> /&gt;</span></span></span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="分栏-4"><div class="hide-block"><button type="button" class="hide-button" style="background-color:#00f">点我预览</button><div class="hide-content"><p>这里有张图片：<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://s1.vika.cn/space/2022/10/30/b35fce448bc9404a8d65c3ce1e6e46eb" alt="image (1)" style="zoom:67%"></p></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></article><div class="post-copyright"><div class="copyright-cc-box"><i class="anzhiyufont anzhiyu-icon-copyright"></i></div><div class="post-copyright__author_box"><a class="post-copyright__author_img" href="/" title="头像"><img class="post-copyright__author_img_back" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" title="头像" alt="头像"><img class="post-copyright__author_img_front" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" title="头像" alt="头像"></a><div class="post-copyright__author_name">MGodmonkey</div><div class="post-copyright__author_desc">不在沉默中沉沦</div></div><div class="post-copyright__post__info"><a class="post-copyright__original" title="该文章为原创文章，注意版权协议" href="https://www.mgodmonkey.cn/posts/2013454d.html">原创</a><a class="post-copyright-title"><span onclick='rm.copyPageUrl("https://www.mgodmonkey.cn/posts/2013454d.html")'>Markdown语法与外挂标签写法汇总</span></a></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div class="rewardLeftButton"><div class="post-reward" onclick="anzhiyu.addRewardMask()"><div class="reward-button button--animated" title="赞赏作者"><i class="anzhiyufont anzhiyu-icon-hand-heart-fill"></i>打赏作者</div><div class="reward-main"><div class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span><ul class="reward-group"><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" target="_blank"><img class="post-qr-code-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" alt="微信"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" target="_blank"><img class="post-qr-code-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" alt="支付宝"></a><div class="post-qr-code-desc">支付宝</div></li></ul><a class="reward-main-btn" href="/about/#about-reward" target="_blank"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></div></div></div><div id="quit-box" onclick="anzhiyu.removeRewardMask()" style="display:none"></div></div><div class="shareRight"><div class="share-link mobile"><div class="share-qrcode"><div class="share-button" title="使用手机访问这篇文章"><i class="anzhiyufont anzhiyu-icon-qrcode"></i></div><div class="share-main"><div class="share-main-all"><div id="qrcode" title="https://www.mgodmonkey.cn/posts/2013454d.html"></div><div class="reward-dec">使用手机访问这篇文章</div></div></div></div></div><div class="share-link weibo"><a class="share-button" target="_blank" href="https://service.weibo.com/share/share.php?title=Markdown语法与外挂标签写法汇总&amp;url=https://www.mgodmonkey.cn/posts/2013454d.html&amp;pic=https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb" rel="external nofollow noreferrer noopener"><i class="anzhiyufont anzhiyu-icon-weibo"></i></a></div><script>function copyCurrentPageUrl(){var e=window.location.href,t=document.createElement("input");t.setAttribute("value",e),document.body.appendChild(t),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),document.body.removeChild(t)}</script><div class="share-link copyurl"><div class="share-button" id="post-share-url" title="复制链接" onclick="copyCurrentPageUrl()"><i class="anzhiyufont anzhiyu-icon-link"></i></div></div></div></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.mgodmonkey.cn" target="_blank">MGodmonkeyの世界</a>！</span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__box"><div class="post-meta__box__tag-list"><a class="post-meta__box__tags" href="/tags/Markdown/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span> Markdown<span class="tagsPageCount">1</span></a><a class="post-meta__box__tags" href="/tags/%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span> 外挂标签<span class="tagsPageCount">1</span></a></div></div></div><div class="post_share"><div class="social-share" data-image="https://mybog.s3.bitiful.net/imgs/cover/cover_23.webp?_r_=aec10139-1087-2595-464e-c9d9570c297b" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css" media="print" onload='this.media="all"'><script src="https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/posts/c76bd3e9.html"><img class="next-cover" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_6.webp?_r_=bb94f888-7022-a346-65c9-56afddd7e4e9" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">部署项目指引</div></div></a></div></nav><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="anzhiyufont anzhiyu-icon-comments"></i> <span>评论</span></div><div class="comment-randomInfo"><a onclick="anzhiyu.addRandomCommentInfo()" href="javascript:void(0)">匿名评论</a><a href="/privacy" style="margin-left:4px">隐私政策</a></div><div class="comment-tips" id="comment-tips"><span>✅ 你无需删除空行，直接评论以获取最佳展示效果</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div><div class="comment-barrage"></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-content"><div class="author-info__sayhi" id="author-info__sayhi" onclick="anzhiyu.changeSayHelloText()"></div><div class="author-info-avatar"><img class="avatar-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" onerror='this.onerror=null,this.src="/img/404.webp"' alt="avatar"><div class="author-status"><img class="g-status" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/08/24/64e6ce9c507bb.png" alt="status"></div></div><div class="author-info__description"><div style="line-height:1.38;margin:.1rem 0;text-align:justify;color:rgba(255,255,255,.8)">这里是我的<b style="color:#fff">科研日记本</b>和<b style="color:#fff">学习记录本</b>，目前处于研1阶段，主攻领域为<b style="color:#fff">空中机器人</b>，因此你将会在这看到大量关于<b style="color:#fff">ROS</b>、<b style="color:#fff">无人机</b>、<b style="color:#fff">算法</b>等教程</div><div style="line-height:1.38;margin:.3rem 0;text-align:justify;color:rgba(255,255,255,.8)">希望你能在这里学习到有用的<b style="color:#fff">知识</b>，可以的话可以<b style="color:#fff">收藏本网站😘</b>。</div></div><div class="author-info__bottom-group"><a class="author-info__bottom-group-left" href="/"><h1 class="author-info__name">MGodmonkey</h1><div class="author-info__desc">不在沉默中沉沦</div></a><div class="card-info-social-icons is-center"><a class="social-icon faa-parent animated-hover" href="https://github.com/MGod-monkey" target="_blank" title="Github"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-github"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://gitee.com/mgod_wu" target="_blank" title="Gitee"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-gitee"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://blog.csdn.net/qq_45516773" target="_blank" title="CSDN"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-csdn"></use></svg></a></div></div></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bullhorn anzhiyu-shake"></i><span>公告</span></div><div class="announcement_content"><center>主域名：<br><del><a target="_blank" rel="noopener" href="https://www.mgodmonkey.love"><b><font color="#5ea6e5">mgodmonkey.love(太贵续费不起)</font></b></a></del><br><a href="https://www.mgodmonkey.cn"><b><font color="#5ee5e0">mgodmonkey.cn</font></b></a><br>备用域名：<br><a target="_blank" rel="noopener" href="https://mgod-monkey.github.io/"><b><font color="#5ea6e5">mgodmonkey.github.io</font></b></a><br><a target="_blank" rel="noopener" href="https://mgodmonkey.zeabur.app/"><b><font color="#5ea6e5">mgodmonkey.zeabur.app</font></b></a><br><a href="mailto:mgod_monkey@qq.com">📬：<font color="#a591e0">mgod_monkey@qq.com</font></a></center></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bars"></i><span>文章目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">1.Markdown语法自带格式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-%E4%BB%A3%E7%A0%81%E5%9D%97"><span class="toc-text">1.1 代码块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-%E5%A4%9A%E7%BA%A7%E6%A0%87%E9%A2%98"><span class="toc-text">1.2 多级标题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-3-%E6%96%87%E5%AD%97%E6%A0%B7%E5%BC%8F"><span class="toc-text">1.3 文字样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-4-%E5%BC%95%E7%94%A8"><span class="toc-text">1.4 引用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-5-%E5%88%86%E5%89%B2%E7%BA%BF"><span class="toc-text">1.5 分割线</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-6-%E5%88%97%E8%A1%A8-%E8%B7%9F%E7%A9%BA%E6%A0%BC%E9%83%BD%E5%8F%AF%E4%BB%A5"><span class="toc-text">1.6 列表(*,+,-跟空格都可以)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-6-1-%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-text">1.6.1 无序列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-6-2-%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-text">1.6.2 有序列表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-7-%E5%9B%BE%E7%89%87"><span class="toc-text">1.7 图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-8-%E8%A1%A8%E6%A0%BC"><span class="toc-text">1.8 表格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-9-%E5%85%AC%E5%BC%8F"><span class="toc-text">1.9 公式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">2.Butterfly外挂标签</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F-text"><span class="toc-text">2.1 行内文本样式 text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC-span"><span class="toc-text">2.2 行内文本 span</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-%E6%AE%B5%E8%90%BD%E6%96%87%E6%9C%AC-p"><span class="toc-text">2.3 段落文本 p</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-%E5%BC%95%E7%94%A8note"><span class="toc-text">2.4 引用note</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-%E4%B8%8A%E6%A0%87%E6%A0%87%E7%AD%BE-tip"><span class="toc-text">2.5 上标标签 tip</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-6-%E5%8A%A8%E6%80%81%E6%A0%87%E7%AD%BE-anima"><span class="toc-text">2.6 动态标签 anima</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-%E5%A4%8D%E9%80%89%E5%88%97%E8%A1%A8-checkbox"><span class="toc-text">2.7 复选列表 checkbox</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-8-%E5%8D%95%E9%80%89%E5%88%97%E8%A1%A8-radio"><span class="toc-text">2.8 单选列表 radio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-9-%E6%97%B6%E9%97%B4%E8%BD%B4-timeline"><span class="toc-text">2.9 时间轴 timeline</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-10-%E9%93%BE%E6%8E%A5%E5%8D%A1%E7%89%87-link"><span class="toc-text">2.10 链接卡片 link</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-11-%E6%8C%89%E9%92%AE-btns"><span class="toc-text">2.11 按钮 btns</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-12-github%E5%8D%A1%E7%89%87-ghcard"><span class="toc-text">2.12 github卡片 ghcard</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-13-github%E5%BE%BD%E6%A0%87-ghbdage"><span class="toc-text">2.13 github徽标 ghbdage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-14-%E7%BD%91%E7%AB%99%E5%8D%A1%E7%89%87-sites"><span class="toc-text">2.14 网站卡片 sites</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-15-%E8%A1%8C%E5%86%85%E5%9B%BE%E7%89%87-inlineimage"><span class="toc-text">2.15 行内图片 inlineimage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-16-%E5%8D%95%E5%BC%A0%E5%9B%BE%E7%89%87-image"><span class="toc-text">2.16 单张图片 image</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-17-%E9%9F%B3%E9%A2%91-audio"><span class="toc-text">2.17 音频 audio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-18-%E8%A7%86%E9%A2%91-video"><span class="toc-text">2.18 视频 video</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-19-%E7%9B%B8%E5%86%8C-gallery"><span class="toc-text">2.19 相册 gallery</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-20-%E6%8A%98%E5%8F%A0%E6%A1%86-folding"><span class="toc-text">2.20 折叠框 folding</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-21-%E5%88%86%E6%A0%8F-tab"><span class="toc-text">2.21 分栏 tab</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-22-%E8%AF%97%E8%AF%8D%E6%A0%87%E7%AD%BE-poem"><span class="toc-text">2.22 诗词标签 poem</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-23-%E9%98%BF%E9%87%8C%E5%9B%BE%E6%A0%87-icon"><span class="toc-text">2.23 阿里图标 icon</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-24-%E7%89%B9%E6%95%88%E6%A0%87%E7%AD%BEwow"><span class="toc-text">2.24 特效标签wow</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-25-%E8%BF%9B%E5%BA%A6%E6%9D%A1-progress"><span class="toc-text">2.25 进度条 progress</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-26-%E6%B3%A8%E9%87%8A-notation"><span class="toc-text">2.26 注释 notation</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-27-%E6%B0%94%E6%B3%A1%E6%B3%A8%E9%87%8A-bubble"><span class="toc-text">2.27 气泡注释 bubble</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-28-%E5%BC%95%E7%94%A8%E6%96%87%E7%8C%AE-reference"><span class="toc-text">2.28 引用文献 reference</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-29-PDF%E5%B1%95%E7%A4%BA"><span class="toc-text">2.29 PDF展示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-30-Hexo-tag-map-%E6%8F%92%E4%BB%B6"><span class="toc-text">2.30 Hexo-tag-map 插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-31-%E9%9A%90%E8%97%8F%E5%9D%97"><span class="toc-text">2.31 隐藏块</span></a></li></ol></li></ol></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="footer_deal"><a class="deal_link" href="mailto:mgod_monkey@qq.com" title="email"><i class="anzhiyufont anzhiyufont anzhiyu-icon-envelope"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://www.facebook.com/profile.php?id=100093287072649&amp;sk=about" title="facebook"><i class="anzhiyufont anzhiyufont anzhiyu-icon-facebook1"></i></a><img class="footer_mini_logo" title="返回顶部" alt="返回顶部" onclick="anzhiyu.scrollToDest(0,500)" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/xx.webp" size="50px"><a class="deal_link" target="_blank" rel="noopener" href="https://github.com/MGod-monkey" title="Github"><i class="anzhiyufont anzhiyufont anzhiyu-icon-github"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://v.douyin.com/UaF6wSA/" title="抖音"><i class="anzhiyufont anzhiyufont anzhiyu-icon-tiktok"></i></a></div><div id="anzhiyu-footer"><div class="footer-group"><div class="footer-title">服务</div><div class="footer-links"><a class="footer-item" title="51la统计" target="_blank" rel="noopener" href="https://v6.51.la/">51la统计</a><a class="footer-item" title="十年之约" target="_blank" rel="noopener" href="https://www.foreverblog.cn/">十年之约</a><a class="footer-item" title="开往" target="_blank" rel="noopener" href="https://github.com/travellings-link/travellings">开往</a></div></div><div class="footer-group"><div class="footer-title">导航</div><div class="footer-links"><a class="footer-item" title="即刻短文" href="/personal/essay/">即刻短文</a><a class="footer-item" title="友链文章" href="/fcircle/">友链文章</a><a class="footer-item" title="留言板" href="/comments/">留言板</a></div></div><div class="footer-group"><div class="footer-title">协议</div><div class="footer-links"><a class="footer-item" title="隐私协议" href="/privacy/">隐私协议</a><a class="footer-item" title="Cookies" href="/cookies/">Cookies</a><a class="footer-item" title="版权协议" href="/copyright/">版权协议</a></div></div><div class="footer-group"><div class="footer-title-group"><div class="footer-title">友链</div><a class="random-friends-btn" id="footer-random-friends-btn" href="javascript:addFriendLinksInFooter();" title="换一批友情链接"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a></div><div class="footer-links" id="friend-links-in-footer"></div></div></div><div id="workboard"><div id="runtimeTextTip"></div></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架Hexo_v6.4.3" title="博客框架Hexo_v6.4.3"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://sourcebucket.s3.bitiful.net/badge/Frame-Hexo-blue.svg" alt="博客框架Hexo_v6.4.3"></a><a class="github-badge" target="_blank" href="https://docs.anheyu.com/" style="margin-inline:5px" data-title="主题版本Anzhiyu_v1.5.0" title="主题版本Anzhiyu_v1.5.0"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.9/img/Theme-AnZhiYu-2E67D3.svg" alt="主题版本Anzhiyu_v1.5.0"></a><a class="github-badge" target="_blank" href="https://vercel.com/" style="margin-inline:5px" data-title="本站采用多线部署，主线路托管于Vercel" title="本站采用多线部署，主线路托管于Vercel"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://sourcebucket.s3.bitiful.net/badge/Hosted-Vercel-brightgreen.svg" alt="本站采用多线部署，主线路托管于Vercel"></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" data-title="本站项目由Github托管" title="本站项目由Github托管"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg" alt="本站项目由Github托管"></a><a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/" style="margin-inline:5px" data-title="本站已完成备案，桂ICP备-2023001814号" title="本站已完成备案，桂ICP备-2023001814号"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/桂ICP备-2023001814号-1.svg" alt="本站已完成备案，桂ICP备-2023001814号"></a><a class="github-badge" target="_blank" href="https://icp.gov.moe/?keyword=20248520" style="margin-inline:5px" data-title="本站已加入萌ICP豪华套餐，萌ICP备20248520号" title="本站已加入萌ICP豪华套餐，萌ICP备20248520号"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/mengICP_20248520.svg" alt="本站已加入萌ICP豪华套餐，萌ICP备20248520号"></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/Copyright-BY-NC-SA.svg" alt="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div id="footer-bar-tips"><div class="copyright">&copy;2023 - 2024 By <a class="footer-bar-link" href="/" title="MGodmonkey" target="_blank">MGodmonkey</a></div></div><div id="footer-type-tips"></div><div class="js-pjax"><script>function subtitleType(){fetch("https://v1.hitokoto.cn").then((t=>t.json())).then((t=>{{const e="出自 "+t.from,p=[];p.unshift(t.hitokoto,e),window.typed=new Typed("#footer-type-tips",{strings:p,startDelay:300,typeSpeed:150,loop:!0,backSpeed:50})}}))}"function"==typeof Typed?subtitleType():getScript("https://cdn.cbd.int/typed.js@2.1.0/dist/typed.umd.js").then(subtitleType)</script></div></div><div class="footer-bar-right"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="桂ICP备-2023001814号">桂ICP备-2023001814号</a><a class="footer-bar-link cc" href="/copyright" title="cc协议"><i class="anzhiyufont anzhiyu-icon-copyright-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-by-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nc-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nd-line"></i></a></div></div></div></footer></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="sidebar-site-data site-data is-center"><a href="/archives/" title="archive"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/" title="tag"><div class="headline">标签</div><div class="length-num">18</div></a><a href="/categories/" title="category"><div class="headline">分类</div><div class="length-num">13</div></a></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><a class="darkmode_switchbutton menu-child" href="javascript:void(0);" title="显示模式"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span>显示模式</span></a></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" href="https://www.mgodmonkey.cn/" title="博客"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">AI项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://chat.mgodmonkey.cn/" title="ChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="ChatGPT"><span class="back-menu-item-text">ChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://newchat.mgodmonkey.cn/" title="NewChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="NewChatGPT"><span class="back-menu-item-text">NewChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://autogpt.mgodmonkey.cn/" title="AutoGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/火龙果.svg" alt="AutoGPT"><span class="back-menu-item-text">AutoGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://academic.chatwithpaper.org/" title="AcademicGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/石榴.svg" alt="AcademicGPT"><span class="back-menu-item-text">AcademicGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://chatwithpaper.org/" title="Chatpaper"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/芒果.svg" alt="Chatpaper"><span class="back-menu-item-text">Chatpaper</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">其他</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://memos.mgodmonkey.cn/" title="Memos"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="Memos"><span class="back-menu-item-text">Memos</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY" title="必过通原"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="必过通原"><span class="back-menu-item-text">必过通原</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kele"></use></svg> <span>归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-zhaji"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-denglong"></use></svg> <span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://music.mgodmonkey.cn"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-erji"></use></svg> <span>音乐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kafei"></use></svg> <span>番剧</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/air-conditioner"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-chonglang"></use></svg> <span>空调</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>社交</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon--chat"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-zhaopian_1"></use></svg> <span>相册集</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/MyFavoriteBaby/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xingsu"></use></svg> <span>大陆养虾</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_shu"></use></svg> <span>加入友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>个人</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_qizhi"></use></svg> <span>说说</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/task_list/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xiaoya"></use></svg> <span>清单</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/equipment/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xigua"></use></svg> <span>装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_aixin"></use></svg> <span>关于</span></a></li></ul></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/Arduino/" style="font-size:.88rem;color:#c1b22b">Arduino<sup>1</sup></a><a href="/tags/ESP32/" style="font-size:.88rem;color:#92b15c">ESP32<sup>1</sup></a><a href="/tags/Markdown/" style="font-size:.88rem;color:#a8369c">Markdown<sup>1</sup></a><a href="/tags/SLAM/" style="font-size:.88rem;color:#8d6e37">SLAM<sup>1</sup></a><a href="/tags/linux/" style="font-size:.88rem;color:#6a4fc3">linux<sup>1</sup></a><a href="/tags/lvgl/" style="font-size:.88rem;color:#027428">lvgl<sup>1</sup></a><a href="/tags/pyqt5/" style="font-size:.88rem;color:#c42e7e">pyqt5<sup>5</sup></a><a href="/tags/ros/" style="font-size:.88rem;color:#766266">ros<sup>21</sup></a><a href="/tags/wsl/" style="font-size:.88rem;color:#4e522c">wsl<sup>1</sup></a><a href="/tags/yolo/" style="font-size:.88rem;color:#6c1688">yolo<sup>1</sup></a><a href="/tags/%E4%BA%8B%E4%BB%B6%E7%9B%B8%E6%9C%BA/" style="font-size:.88rem;color:#100984">事件相机<sup>1</sup></a><a href="/tags/%E4%BB%BF%E7%9C%9F/" style="font-size:.88rem;color:#5d128b">仿真<sup>1</sup></a><a href="/tags/%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE/" style="font-size:.88rem;color:#01584a">外挂标签<sup>1</sup></a><a href="/tags/%E6%97%A0%E4%BA%BA%E6%9C%BA/" style="font-size:.88rem;color:#4dac89">无人机<sup>9</sup></a><a href="/tags/%E6%B5%8B%E8%AF%84/" style="font-size:.88rem;color:#861e41">测评<sup>1</sup></a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size:.88rem;color:#a39674">算法<sup>3</sup></a><a href="/tags/%E9%97%AE%E9%A2%98%E5%A4%A7%E5%85%A8/" style="font-size:.88rem;color:#3d7831">问题大全<sup>1</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E5%88%86%E4%BA%AB/" style="font-size:.88rem;color:#0a35ad">项目分享<sup>1</sup></a></div></div><hr></div></div><div id="keyboard-tips"><div class="keyboardTitle">博客快捷键</div><div class="keybordList"><div class="keybordItem"><div class="keyGroup"><div class="key">shift K</div></div><div class="keyContent"><div class="content">关闭快捷键功能</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift A</div></div><div class="keyContent"><div class="content">打开/关闭中控台</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift M</div></div><div class="keyContent"><div class="content">播放/暂停音乐</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift D</div></div><div class="keyContent"><div class="content">深色/浅色显示模式</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift S</div></div><div class="keyContent"><div class="content">站内搜索</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift R</div></div><div class="keyContent"><div class="content">随机访问</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift H</div></div><div class="keyContent"><div class="content">返回首页</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift F</div></div><div class="keyContent"><div class="content">友链鱼塘</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift L</div></div><div class="keyContent"><div class="content">友链页面</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift P</div></div><div class="keyContent"><div class="content">关于本站</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift I</div></div><div class="keyContent"><div class="content">原版/本站右键菜单</div></div></div></div></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="anzhiyufont anzhiyu-icon-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="anzhiyufont anzhiyu-icon-gear"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="anzhiyufont anzhiyu-icon-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="anzhiyufont anzhiyu-icon-comments"></i></a><a id="switch-commentBarrage" href="javascript:anzhiyu.switchCommentBarrage();" title="开关弹幕"><i class="anzhiyufont anzhiyu-icon-danmu"></i></a><button id="go-up" type="button" title="回到顶部"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><div id="nav-music"><a id="nav-music-hoverTips" onclick="anzhiyu.musicToggle()" accesskey="m">播放音乐</a><div id="console-music-bg"></div><meting-js id="572504216" server="netease" type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random" volume="0.7"></meting-js></div><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="anzhiyufont anzhiyu-icon-xmark"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="anzhiyufont anzhiyu-icon-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="anzhiyufont anzhiyu-icon-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right" style="font-size:1rem"></i></div><div class="rightMenu-item" id="menu-top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="anzhiyufont anzhiyu-icon-paste"></i><span>粘贴文本</span></div><a class="rightMenu-item" id="menu-commenttext"><i class="anzhiyufont anzhiyu-icon-comment-medical"></i><span>引用到评论</span></a><div class="rightMenu-item" id="menu-newwindow"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="anzhiyufont anzhiyu-icon-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="anzhiyufont anzhiyu-icon-images"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="anzhiyufont anzhiyu-icon-download"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-newwindowimg"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开图片</span></div><div class="rightMenu-item" id="menu-search"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>站内搜索</span></div><div class="rightMenu-item" id="menu-searchBaidu"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>百度搜索</span></div><div class="rightMenu-item" id="menu-music-toggle"><i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span></div><div class="rightMenu-item" id="menu-music-back"><i class="anzhiyufont anzhiyu-icon-backward"></i><span>切换到上一首</span></div><div class="rightMenu-item" id="menu-music-forward"><i class="anzhiyufont anzhiyu-icon-forward"></i><span>切换到下一首</span></div><div class="rightMenu-item" id="menu-music-playlist" onclick="window.open(&quot;https://music.mgodmonkey.cn&quot;, &quot;_blank&quot;);" style="display:none"><i class="anzhiyufont anzhiyu-icon-radio"></i><span>查看所有歌曲</span></div><div class="rightMenu-item" id="menu-music-copyMusicName"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制歌名</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" id="menu-randomPost"><i class="anzhiyufont anzhiyu-icon-shuffle"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="anzhiyufont anzhiyu-icon-cube"></i><span>博客分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item" id="menu-copy" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制地址</span></a><a class="rightMenu-item" id="menu-commentBarrage" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-message"></i><span class="menu-commentBarrage-text">关闭热评</span></a><a class="rightMenu-item" id="menu-darkmode" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></a><a class="rightMenu-item" id="menu-translate" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-language"></i><span>轉為繁體</span></a></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.umd.js"></script><script src="https://cdn.cbd.int/instant.page@5.2.0/instantpage.js" type="module"></script><script src="https://cdn.cbd.int/vanilla-lazyload@17.8.5/dist/lazyload.iife.min.js"></script><script src="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script>function panguFn(){"object"==typeof pangu?pangu.autoSpacingPage():getScript("https://cdn.cbd.int/pangu@4.0.7/dist/browser/pangu.min.js").then((()=>{pangu.autoSpacingPage()}))}function panguInit(){GLOBAL_CONFIG_SITE.isPost&&panguFn()}document.addEventListener("DOMContentLoaded",panguInit)</script><script>var meting_api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r"</script><canvas id="universe"></canvas><script async src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/dark/dark.js"></script><script>var HoldLog=console.log;console.log=function(){};let now1=new Date;queueMicrotask((()=>{const o=function(){HoldLog.apply(console,arguments)},n=new Date("03/18/2023 00:00:00");now1.setTime(now1.getTime()+250);const c=(now1-n)/1e3/60/60/24,e=["欢迎来访MGodmonkeyの世界!","心中有光万物皆是光，万物皆是迪迦！","\n        \n    ███╗   ███╗ ██████╗  ██████╗ ██████╗ ███╗   ███╗ ██████╗ ███╗   ██╗██╗  ██╗███████╗██╗   ██╗\n    ████╗ ████║██╔════╝ ██╔═══██╗██╔══██╗████╗ ████║██╔═══██╗████╗  ██║██║ ██╔╝██╔════╝╚██╗ ██╔╝\n    ██╔████╔██║██║  ███╗██║   ██║██║  ██║██╔████╔██║██║   ██║██╔██╗ ██║█████╔╝ █████╗   ╚████╔╝ \n    ██║╚██╔╝██║██║   ██║██║   ██║██║  ██║██║╚██╔╝██║██║   ██║██║╚██╗██║██╔═██╗ ██╔══╝    ╚██╔╝  \n    ██║ ╚═╝ ██║╚██████╔╝╚██████╔╝██████╔╝██║ ╚═╝ ██║╚██████╔╝██║ ╚████║██║  ██╗███████╗   ██║   \n    ╚═╝     ╚═╝ ╚═════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝   ╚═╝    \n        \n        ","已上线",Math.floor(c),"天","©2023 By MGodmonkey 1.6.12"],t=["NCC2-036","调用前置摄像头拍照成功，识别为【小笨蛋】.","Photo captured: ","🤪"];setTimeout(o.bind(console,`\n%c${e[0]} %c ${e[1]} %c ${e[2]} %c${e[3]}%c ${e[4]}%c ${e[5]}\n\n%c ${e[6]}\n`,"color:#3b70fc","","color:#3b70fc","color:#3b70fc","","color:#3b70fc","")),setTimeout(o.bind(console,`%c ${t[0]} %c ${t[1]} %c \n${t[2]} %c\n${t[3]}\n`,"color:white; background-color:#4fd953","","",'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%')),setTimeout(o.bind(console,"%c WELCOME %c 你好，小笨蛋.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c ⚡ Powered by MGodmonkey %c 你正在访问 MGodmonkey 的博客.","color:white; background-color:#f0ad4e","")),setTimeout(o.bind(console,"%c W23-12 %c 你已打开控制台.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c S013-782 %c 你现在正处于监控中.","color:white; background-color:#d9534f",""))}))</script><script async src="/anzhiyu/random.js"></script><script async>!function(){var t,e,n,r,a,o,i,l,h=new Date("03/18/2023 00:00:00"),u=new Date("02/13/2024 11:47:00"),g=new Date;setInterval((()=>{!function(){g=new Date,g.getHours();var f=(g-h)/1e3/60/60/24;t=Math.floor(f);var s=(g-h)/1e3/60/60-24*t;e=Math.floor(s),1==String(e).length&&(e="0"+e);var c=(g-h)/1e3/60-1440*t-60*e;n=Math.floor(c),1==String(n).length&&(n="0"+n);var d=(g-h)/1e3-86400*t-3600*e-60*n;r=Math.round(d),1==String(r).length&&(r="0"+r),g.getHours();var m=(g-u)/1e3/60/60/24;a=Math.floor(m);var v=(g-u)/1e3/60/60-24*a;o=Math.floor(v),1==String(o).length&&(o="0"+o);var y=(g-u)/1e3/60-1440*a-60*o;i=Math.floor(y),1==String(i).length&&(i="0"+i);var M=(g-u)/1e3-86400*a-3600*o-60*i;l=Math.round(M),1==String(l).length&&(l="0"+l)}(),function(){if(!document.getElementById("footer"))return;let h="";h=`恋爱进度条运行了 ${a} 天<span id='runtime'> ${o} 小时 ${i} 分 ${l} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:pink'></i><br>本站居然运行了 ${t} 天<span id='runtime'> ${e} 小时 ${n} 分 ${r} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:blue'></i>`,document.getElementById("runtimeTextTip")&&(document.getElementById("runtimeTextTip").innerHTML=h)}()}),1e3)}()</script><script src="https://cdn.cbd.int/algoliasearch@4.18.0/dist/algoliasearch-lite.umd.js"></script><script src="https://cdn.cbd.int/instantsearch.js@4.60.0/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script><div class="js-pjax"><script>(()=>{const o=()=>{"object"==typeof twikoo?setTimeout(t,0):getScript("https://cdn.cbd.int/twikoo@1.6.30/dist/twikoo.all.min.js").then(t)},t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://twikoo.mgodmonkey.cn/",region:"",onCommentLoaded:()=>{anzhiyu.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))};anzhiyu.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><input type="hidden" name="page-type" id="page-type" value="post"><script async src="/js/anzhiyu/comment_barrage.js"></script></div><script>window.addEventListener("load",(()=>{const e=e=>{let t="";if(e.length)for(let n=0;n<e.length;n++){t+="<div class='aside-list-item'>";{const a="data-lazy-src";t+=`<a href='${e[n].url}' class='thumbnail'><img ${a}='${e[n].avatar}' alt='${e[n].nick}'><div class='name'><span>${e[n].nick} </span></div></a>`}t+=`<div class='content'>\n        <a class='comment' href='${e[n].url}' title='${e[n].content}'>${e[n].content}</a>\n        <time datetime="${e[n].date}">${anzhiyu.diffDate(e[n].date,!0)}</time></div>\n        </div>`}else t+="没有评论";let n=document.querySelector("#card-newest-comments .aside-list");n&&(n.innerHTML=t),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(n)},t=()=>{if(document.querySelector("#card-newest-comments .aside-list")){const t=saveToLocal.get("twikoo-newest-comments");t?e(JSON.parse(t)):(()=>{const t=()=>{twikoo.getRecentComments({envId:"https://twikoo.mgodmonkey.cn/",region:"",pageSize:6,includeReply:!0}).then((function(t){const n=t.map((e=>{return{content:(t=e.comment,""===t||(t=(t=(t=(t=t.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length>150&&(t=t.substring(0,150)+"..."),t),avatar:e.avatar,nick:e.nick,url:e.url+"#"+e.id,date:new Date(e.created).toISOString()};var t}));saveToLocal.set("twikoo-newest-comments",JSON.stringify(n),10/1440),e(n)})).catch((function(e){document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}))};"object"==typeof twikoo?t():getScript("https://cdn.cbd.int/twikoo@1.6.30/dist/twikoo.all.min.js").then(t)})()}};t(),document.addEventListener("pjax:complete",t)}))</script><script async data-pjax src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.1/bubble/bubble.js"></script><script>var visitorMail="who@qq.com"</script><script async data-pjax src="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/waterfall/waterfall.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script><script src="/js/anzhiyu/right_click_menu.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.9/icon/ali_iconfont_css.css"><script async src="https://at.alicdn.com/t/c/font_3960079_reowwynqtt7.js"></script><script async data-pjax src="/js/owo.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/aplayer/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/anzhiyu-blog-static@1.0.1/js/APlayer.min.js"></script><script src="https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.2/assets/js/Meting2.min.js"></script><script src="https://lib.baomitu.com/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors=['meta[property="og:image"]','meta[property="og:title"]','meta[property="og:url"]','meta[property="og:type"]','meta[property="og:site_name"]','meta[property="og:description"]',"head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(anzhiyu.removeGlobalFnEvent("pjax"),anzhiyu.removeGlobalFnEvent("themeChange"),document.getElementById("rightside").classList.remove("rightside-show"),window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode")})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script charset="UTF-8" src="https://cdn.cbd.int/anzhiyu-theme-static@1.1.5/accesskey/accesskey.js"></script></div><div id="popup-window"><div class="popup-window-title">通知</div><div class="popup-window-divider"></div><div class="popup-window-content"><div class="popup-tip">你好呀</div><div class="popup-link"><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i></div></div></div><script data-pjax>function butterfly_swiper_injector_config(){var t=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),t.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-18</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt="">Markdown语法与外挂标签写法汇总</a><div class="blog-slider__text">🥧本文汇总Markdown格式以及外挂标签在网页端的渲染效果，可作为文档进行查询</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_31.webp?_r_=c21fe602-3554-f265-0e73-1524950a0e28" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt="">物体路径规划项目笔记</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/10/02/651ad2e1606f4.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-23</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt="">ROS资源汇总</a><div class="blog-slider__text">ROS常用资源汇总（从入门到入坟）</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_11.webp?_r_=c22c6364-0c20-490e-844b-7addff113b3b" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-29</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt="">ROS指令大全</a><div class="blog-slider__text">ROS常用指令大全（从入门到入坟）</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>')}for(var elist="undefined".split(","),cpage=location.pathname,epage="/",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script></body></html>